html - 将 Bootstrap 输入字段居中

Question

我是新手，尤其是 Bootstrap。我有这段代码:

<div class="row">
    <div class="col-lg-3">
       <div class="input-group">
         <input type="text" class="form-control">
         <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
       </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

我需要把这个输入框和按钮放在页面的中央:

这不起作用:“margin-left: auto; margin-right:auto;”

有没有人有什么想法？

Answer 1

您可以使用偏移量使列显示居中，只需使用等于行剩余大小一半的偏移量，在您的情况下我建议使用 col-lg-4 和 col-lg-offset-4，即 (12-4)/2。

<div class="row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
            <input type="text" class="form-control" /> 
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div><!-- /input-group -->
    </div><!-- /.col-lg-4 -->
</div><!-- /.row -->

Demo fiddle

请注意，此技术仅适用于偶数列大小(.col-X-2、.col-X-4、col-X-6 等...)，如果你想支持任何大小，你可以使用 margin: 0 auto; 但你也需要从元素中删除 float ，我推荐自定义 CSS类如下:

.col-centered{
    margin: 0 auto;
    float: none;
}

Demo fiddle