Question

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

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

关于我如何实现这一目标的任何建议？

Answer 1

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

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

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

Answer 2

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

这样的事情：

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

Answer 3

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

ie：.offset4.span4

Answer 4

不幸的是，目前偏移类在row-fluid元素内部无法正常工作。

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

如果要使用row-fluid元素，可以在内容div之前添加带有br标记的span4。

Answer 5

在这个中心问题上经过多次努力之后，我设法创建了自己的推文

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），现在终于永远居中

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

5 个答案: