Question

我正在尝试创建一个html管理员登录页面。我是Bootstrap和CSS的新手，很难将窗体居中并调整间距。

html：

<div class="container">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <form class="form-signin">
            <h2 class="form-signin-heading">Administrator Login</h2>
            <label for="inputUsername" class="sr-only">Username</label>
            <input type="username" id="inputUsername" class="form-control" placeholder="Username" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
            <button class="btn btn-sm btn-primary btn-block" type="submit">Login</button>
          </form>
        </div>
    </div>
</div><!--Container-->

在我的CSS中，我只更改了页面的背景颜色并将h2标题居中。目前，表单非常宽，当我在CSS中调整宽度时，表单就会变得不复存在。

form { width: 500px; }

我希望表单完全位于中间。现在它水平居中但不垂直居中。
我想重新调整表单的宽度。
我想重新调整按钮的宽度。我不希望它与表格的长度相同。

非常感谢任何帮助。

Answer 1

这就是你将表格集中在一起的方式：

<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">ur code here</div></div></div>

Answer 2

.container-wrap{
  width:300px;
  margin:0 auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container-wrap">
<div class="container">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <form class="form-signin">
            <h2 class="form-signin-heading">Administrator Login</h2>
            <label for="inputUsername" class="sr-only">Username</label>
            <input type="username" id="inputUsername" class="form-control" placeholder="Username" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
            <button class="btn btn-sm btn-primary btn-block" type="submit">Login</button>
          </form>
        </div>
    </div>
</div><!--Container-->
  </div><!-- container-wrap-->

这就是如何使形状中心在屏幕上对齐。

此致

Answer 3

您可以尝试这样的事情：

CSS

.outer {
    position:absolute;
    height:100%;
    width:100%;
    display: table;
}
form {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

HTML

<div class="container">
 <div class="row">
        <div class="col-lg-10 col-lg-offset-1 outer">
            <form class="form-signin">
                <h2 class="form-signin-heading">Administrator Login</h2>
                <label for="inputUsername" class="sr-only">Username</label>
                <input type="username" id="inputUsername" class="form-control" placeholder="Username" required autofocus />
                <label for="inputPassword" class="sr-only">Password</label>
                <input type="password" id="inputPassword" class="form-control" placeholder="Password" required />
                <button class="btn btn-sm btn-primary btn-block" type="submit">Login</button>
            </form>
        </div>
    </div>
</div>

在support streams上查看。

Answer 4

这里是我如何居中和垂直对齐形式

   /* css */

   body{
        width:960px;
        margin:0 auto;
      }
     .container-wrap{
         display:block;
         margin-top:25%;
         background:#999;
         padding-bottom:40px;
       }
        .container-wrap input{
           margin-bottom:10px;
         }

<!--html code-->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 <div class="container-wrap">
   <div class="container">
      <div class="row">
        <div class="col-md-4 col-lg-4 col-sm-4 col-md-offset-3 col-lg-offset-3 col-sm-offset-3">
           <form class="form-signin">
            <h2 class="form-signin-heading">Administrator Login</h2>
            <label for="inputUsername" class="sr-only">Username</label>
           <input type="username" id="inputUsername" class="form-control" placeholder="Username" required autofocus>
           <label for="inputPassword" class="sr-only">Password</label>
         <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
         <button class="btn btn-sm btn-primary btn-block" type="submit">Login</button>
      </form>
    </div>
   </div>
 </div><!--Container-->
 </div><!-- container-wrap-->

我希望这能帮助您了解它是如何运作的。

此致

需要帮助垂直居中的Bootstrap表单

4 个答案:

CSS

HTML