css - 如何使用 Bootstrap 在页面中心对齐表单

Question

我正在使用 twitter-bootstrap 进行样式设置。我已经登录了表单，我正在尝试将表单放在页面的中心。这里关于 stackoverflow 的大部分建议都建议将元素放入 container 类中，这就是我正在做的。
要求是登录表单需要有一些背景颜色，并且需要位于表单的中心。我创建了一个 CSS 类 .login-dialog 并将其应用到 div 上，它是 form

的包装器

但是有一些问题:
-整行的背景色
- 表单及其控件未居中对齐
-右边有很多额外的背景
(请看下图)

我当然可以使用 table 解决这个问题，但我不想使用任何固定宽度的解决方案。有人可以帮我解决这个问题

    <div class="container page-login">
        <div class="login-control-padding">
            <div class="row ng-hide" ng-show="model.errorMessage">
                <div class="col-md-12 col-sm-12">
                    <div class="alert alert-danger ng-binding">
                        <strong>Error:</strong>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <span class="clientName ng-binding">Local Host Client</span>
                </div>
            </div>
            <div class="row">
                <div ng-show="model.loginUrl">
                    <div class="login-dialog">
                        <form name="form" class="form-horizontal ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength" role="form" action="/identity/login?signin=1111" method="post">
                            <input name="idsrv.xsrf" class="ng-isolate-scope" type="hidden" value="22222" token="model.antiForgery">
                            <div class="form-group">
                                <label class="control-label col-md-1" for="username">Username</label>
                                <div class="col-md-3">
                                    <input name="username" class="form-control ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" id="username" autofocus="" required="" type="text" maxlength="100" placeholder="Username" ng-model="model.username">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-1" for="password">Password</label>
                                <div class="col-md-3">
                                    <input name="password" class="form-control ng-pristine ng-untouched ng-isolate-scope ng-invalid ng-invalid-required ng-valid-maxlength" id="password" required="" type="password" maxlength="100" placeholder="Password" ng-model="model.password" focus-if="model.username" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group" ng-show="model.allowRememberMe">
                                <label class="control-label col-md-1" for="rememberMe"></label>
                                <div class="col-md-3">
                                    <input name="rememberMe" class="ng-pristine ng-untouched ng-valid" id="rememberMe" type="checkbox" value="true" ng-model="model.rememberMe">
                                    <span>Remember Me</span>
                                    <button class="btn btn-default pull-right">Login</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS 类

.login-dialog{
   background-color:rgb(40, 147, 194);
   border:solid;
   border-width:1px;
   border-radius:5px;
   border-color:rgb(28, 104, 137);    
   color:white;
   padding-top:10px;
  }


  .login-control-padding {
    padding-top: 30px;
  }

输出

Answer 1

问题是 .login-dialog 是一个 block 元素(拉伸(stretch)到全宽)。所以蓝色跨越全宽。

但是，在表单控件中，您添加了类 .col-md-1 和 .col-md-3 类。当使表单元素在 12 个网格中跨越 4(1+3)的宽度时。因此，剩下的 8 个网格未被使用。

现在您需要做的就是在 login-dialog 中添加类 col-md-4 col-md-offset-4。这将使表单元素保持居中。现在将 label 中的所有 col-md-1 更改为 col-md-4 并将 form-control 中的 col-md-3 更改为 col-md-8。

如果你还是一头雾水，看看这个，http://output.jsbin.com/lirilojeti

希望对您有所帮助。

谢谢!