css - 为 Twitter Bootstrap 调整对象大小

Question

我想把登录框放在中间。不知道如何在 Bootstrap 中执行此操作。谁能说这是要做的。

下面是我写的代码。请纠正我

<div class="container-fluid">

  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      <button type="button" class="btn btn-primary btn-lg">Register</button>
      <h3><strong>OR</strong></h3>
  </div>
<div class="col-sm-6">
    <form class="form-signin" style="text-align:center" role="form">
        <h2 class="form-signin-heading">Please sign in to Continue</h2>           
        <div class="col-lg-7"><input type="email" class="form-control text-center" placeholder="Domain ID" autofocus required></div>
        <div class="col-lg-7"><input type="password" class="form-control text-center" placeholder="Password" required></div>
        <p><button class="btn btn-lg btn-primary" type="submit">Sign in</button>
    </form>
    </div>
</div>

Answer 1

如果您只需要将 Login Div 居中，只需遵循基本的 bootstrap 网格标准即可。 网格分为 12 列。要使跨越 6 列的 div 居中，您需要它距离页面最左侧的起点 3 列。即 col-sm-offset-3 我修改了您的代码以反射(reflect)更改

<div class="container-fluid">
 <div class="starter-template text-center">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.
        <br>All you get is this text and a mostly barebones HTML document.</p>
    <button type="button" class="btn btn-primary btn-lg">Register</button>
    <h3>
        <strong>OR</strong>
    </h3>
 </div>
 <div class="col-sm-offset-3 col-sm-6">
    <form class="form-signin text-center" role="form">
        <h2 class="form-signin-heading">Please sign in to Continue</h2>
        <input type="email" class="form-control text-center" placeholder="Domain ID" autofocus required>
        <input type="password" class="form-control text-center" placeholder="Password" required>
        <br>
        <button class="btn btn-md btn-primary" type="submit">Sign in</button>
    </form>
  </div>
</div>

工作代码:jsBin : Centered Login Div