时间戳

首页 > 解决方案 > 调整大小时表单外观的版本不正确

html - 调整大小时表单外观的版本不正确

问题描述

问题详情

当我调整浏览器大小时，它显示如下......

很抱歉，由于声誉点低，无法显示图像。

此外，当我减小浏览器大小时，它会显示如下......

很抱歉，由于声誉点低，无法显示图像。

我的 JS Fiddle 在这里

我在下面的代码中遗漏了什么吗？

<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
    </head>
    <body>
        <div id="app">  
            <main class="py-4">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">Login</div>
                                <div class="card-body">
                                    <form role="form" class="row">
                                        <div class="col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <label for="Email Address" class="control-label">UserName Or EmailAddress</label>
                                                <input type="text" name="Email Address" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <label for="Password" class="control-label">Password</label>
                                                <input type="password" name="Password" class="form-control">
                                            </div>
                                        </div>

                                        <div class="col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <button type="button" class="btn btn-primary" >
                                                    Login
                                                </button>
                                                <a class="btn btn-link" title="Forgot Password">Forgot Password</a>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </body>
</html>

标签： htmlbootstrap-4

解决方案

推荐阅读