居中引导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-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; }
演示小提琴
集中元素的最好方法是使用.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>
