如何在引导程序中以表格形式居中输入？

Question

我想要两个输入（登录名和密码）。一比一，每个约 col-sm-6。如果没有 col-sm-offset-3，我无法将此输入居中。使用 offset 它确实有效，但我想将此输入集中在每个屏幕上。也许我应该在某个地方添加 .center > 或 margin auto？但是哪里…

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">

  <div class="row">
    <div class="box">
      <div class="col-lg-12">
        <hr>
        <h4 class="text-center">Logowanie</h4>
        <hr>
        <form method="post" role="form" class="form-horizontal">
          {{ csrf_field() }}
          <div class="row">
            <div class="form-group">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

原文由 wenus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过使用 xs 层在所有屏幕上使用偏移量。

http://www.bootply.com/P31H4uF1QG

          <form method="post" role="form" class="form-horizontal">
                    {{ csrf_field() }}
                  <div class="form-group">
                    <div class="col-xs-6 col-xs-offset-3">
                      <input type="email" class="form-control" name="email">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-xs-6 col-xs-offset-3">
                      <input type="email" class="form-control" name="email" placeholder="email">
                    </div>
                  </div>
         </form>

Also, don’t use both row and form-group , since the form-group works like a row to contain col-*

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您不想使用 offset 您可以使用我称之为居中类 .centered 并将其作为您想要居中的内容的包装。

请参见下面的示例：

 .centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

  <div class="row">
    <div class="box">
      <div class="col-lg-12">
        <hr>
        <h4 class="text-center">Logowanie</h4>
        <hr>
        <form method="post" role="form" class="form-horizontal">
          {{ csrf_field() }}
            <div class="form-group centered">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
            <div class="form-group centered">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>

原文由 Dalin Huang 发布，翻译遵循 CC BY-SA 3.0 许可协议