居中引导输入字段

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 -->

演示小提琴

注意,这种技术只适用于偶数列的尺寸(.col-X-2,.col-X-4,col-X-6,等...),如果你想支持您可以使用任何尺寸margin: 0 auto;,但你需要删除元素浮动过,我推荐一个自定义的CSS类像以下:

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

演示小提琴

Answer 2

Using offsets is not desired for responsive websites.

Use a flexbox with justify content center:

<div class="row d-flex justify-content-center">
  <input></input>
</div>

Answer 3

尝试将此样式应用于您的div class="input-group":

text-align:center;

查看它:小提琴.

Answer 4

使用.center-block辅助类来集中元素的最佳方法.但你的bootstrap版本必须不低于3.1.1

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-3 center-block">
    <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 -->

Answer 5

好的，这对我来说是最好的解决方案。Bootstrap 包括移动优先的流体网格系统，随着设备或视口大小的增加，它可以适当地扩展到 12 列。所以这在每个浏览器和设备上都能完美运行：

        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-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 class="col-lg-4"></div>
        </div><!-- /.row -->

这意味着 4 + 4 + 4 =12... 所以第二个 div 将在中间。

示例：http : //jsfiddle.net/jpGwm/embedded/result/