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是一个块元素（拉伸到全宽）。所以蓝色跨越全宽。

但是，在表单控件中，您添加了一个类.col-md-1和.col-md-3类。使表单元素在12个网格中跨越4（1 + 3）宽度。所以，剩下的8个网格未使用。

现在您需要做的就是在col-md-4 col-md-offset-4中添加课程login-dialog。这将使表单元素保持在中心位置。现在将标签中的所有col-md-1更改为col-md-4，将表单控件中的col-md-3更改为col-md-8。

如果你仍然感到困惑，请看一下http://output.jsbin.com/lirilojeti

希望它有所帮助。

谢谢！

Answer 2

- 整行获得背景颜色

这是因为.login-dialog div没有指定的bootstrap col类，因此它会延伸到父容器的宽度.row。

- 表单及其控件未在中心对齐

您需要使用偏移类（col-sm-offset-3或类似内容）将表单更多地移动到中心

- 右边有很多额外的背景

一旦您正确设置了表格宽度并以您想要的方式居中，就应该修复此问题。

请参阅我的快速代码段：

＆＃13;

.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;
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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 col-sm-6 col-sm-offset-3">
                        <form name="form" class="form-horizontal ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength row" 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>

＆＃13;

如何使用引导程序在页面中心对齐表单

2 个答案: