如何使用 BootStrap 将表单水平居中？答案

【问题标题】：How to horizontal center a form using BootStrap?如何使用 BootStrap 将表单水平居中？
【发布时间】：2012-03-17 21:29:12
【问题描述】：

您好，我正在尝试使用 BootStrap 2 在屏幕中间放置一个登录表单。我已经尝试了几种使用偏移等的组合。但我似乎没有运气......

<div class="row-fluid">
    <form action='' method='POST' id='loginForm' class='form-horizontal' autocomplete='off'>
    ...
    </form>
</div>

关于如何实现这一点的任何建议？

【问题讨论】：

经典方式呢？你试过保证金吗：0自动；或位置：绝对；左：50%； ?

标签： html forms twitter-bootstrap

【解决方案1】：

通常所有跨度都向左浮动。因此，您必须将其浮动为无，然后将边距设置为自动。

类似这样的：

 <div class="span8" style="float:none; margin:0 auto"></div>

【讨论】：

唯一明智的答案。我创建了一个名为center 的css 类并添加了width: 100%，现在它适用于包括form-horizontal dl-horizontal spanN 等在内的所有内容，同时保持响应。太棒了！
这个问题的正确答案！应该这样标记。

【解决方案2】：

在为这个中心问题苦苦挣扎之后，我设法创建了自己的 tweeks

CSS：

.control-group.center{ float:none;margin:0 auto;width:400px;margin-bottom:20px;}
.control-group .field {width:140px;float:left}
.control-group .l {width:120px;float:left;line-height: 29px;}
.row-fluid .offset4{
    display: block!important;
    float: none!important;
    width: 100%!important;
    margin-left: 0!important;
    padding:0 80px;
}
@media (max-width: 497px){
    .control-group.center {text-align: center;float:inherit;width: auto}
    .control-group .field,.control-group .l {width:120px;float:none;text-align: center;width: auto}
}

HTML：

<div class="container">
      <div class="row-fluid">
        <div class="offset4 span2">

          <form class="form-horizontal" action="enviar-pedido.php" method="post">
            <fieldset>
              <legend>Ingrese sus datos:</legend>
              <div class="control-group center">
                <div class="l">Nombre</div> <div class="field"><input type="text" id="txtNombre" name="txtNombre" placeholder="Nombre"></div>
              </div>
              <div class="control-group center">
                <div class="l">Email</div> <div class="field"><input type="text" id="txtEmail" name="txtEmail" placeholder="Email"></div>
              </div>
              <div class="control-group center">
                <div class="l">Teléfono</div> <div class="field"><input type="text" id="txtTelefono" name="txtTelefono" placeholder="Telefono"></div>
              </div>
            </fieldset>
          </form>
        </div>
      </div>
    </div>

现在它终于永远居中，即使在调整浏览器（Chrome 和 Firefox）大小时也是如此

【讨论】：

【解决方案3】：

如果您想使用网格系统，请按照@Pickle 的回答开始。这将使包含您的表单的跨栏居中。如果您希望表单在该范围内居中，您将不得不做更多的工作，例如@kajo 在他对您的问题的评论中提到的事情。

为了详细说明@Pickle 的答案，这里有一些示例代码，它在默认的 12 列网格中将 4 列的跨度居中。如果您需要跨越不同数量的列，请使用@Pickle 的公式（但请记住，您的跨越列数必须是偶数）

<div class="container">
  <div class="row">
    <div class="offset4 span4">
      .. form goes here ..
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

不幸的是，当前偏移类在 row-fluid 元素中不能正常工作。

https://github.com/twitter/bootstrap/pull/2394

如果你想使用 row-fluid 元素，你可以在你的内容 div 之前添加一个带有 br 标签的 span4。

【讨论】：

【解决方案5】：

只需将类设置为 2 * offsetClass + span class= 12 列。

即：.offset4.span4

【讨论】：