居中引导input字段

我是新来的。 特别是与自举。 我有这个代码:

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

在网页上看起来像这样
我需要把这个input字段和button放在页面的中心…“margin-left:auto; margin-right:auto;” 没有工作…有人有一个想法?

你可以使用偏移量使列出现居中,只需使用等于行剩余大小的一半的偏移量,在你的情况下,我会build议使用col-lg-4col-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-4col-X-6等),如果你想支持任何大小你可以使用margin: 0 auto; 但是你也需要从元素中删除浮动元素,我推荐一个像下面这样的自定义CSS类:

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

演示小提琴

集中元素的最好方法是使用.center-block帮助程序类。 但是你的引导版本必须不小于3.1.1

 <link href="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 --> 

尝试使用此代码:

 .col-lg-3 { width: 100%; } .input-group { width: 200px; // for exemple margin: 0 auto; } 

如果没有工作使用!重要的

尝试应用这种风格到你的div class="input-group"

 text-align:center; 

查看: 小提琴 。

好的,这对我来说是最好的解决scheme。 Bootstrap包括移动优先的stream体网格系统,随着设备或视口尺寸的增加,可适当扩展至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/

对于我来说,这个解决scheme很好地将input字段放在TD中心:

 <link href="ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" /> <td style="background:#B3AEB5;"> <div class="form-group text-center"> <div class="input-group" style="margin:auto;"> <input type="month" name="p2" value="test"> </div> </div> </td>