中心在twitter bootstrap中对齐一列

Question

我已经开始学习Bootstrap了.我的问题是如何水平居中对齐列,bootstrap包含12列布局,没有中间数.为了更清楚,如果它是11列布局,中间的数字将是6(左边5列,中间1列,右边5列)

Answer 1

这个问题在这里正确回答使用Twitter Bootstrap 3中心列

对于奇数行:即col-md-7或col-large-9使用此

将col-centered添加到要居中的列.

<div class="col-lg-11 col-centered">    

并将其添加到样式表:

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

对于偶数行:即col-md-6或col-large-10使用此

只需使用bootstrap 3的偏移col类.即

<div class="col-lg-10 col-lg-offset-1">

Answer 2

使用bootstrap 3,实现所需目标的最佳方式是使用偏移柱.有关更多详细信息,请参阅这些示例:http:
//getbootstrap.com/css/#grid-offsetting

简而言之,在没有使用任何自定义类的情况下,没有看到你的div这里有一个可能有帮助的例子.请注意如何使用" col-6 "以及如何使用" col-6 "...因此使用" offset-3 ".同等拆分将允许你想要的居中间距:

<div class="container">
<div class="col-sm-6 col-sm-offset-3">
your centered, floating column
</div></div>

Answer 3

如果你不能放1列,你可以简单地把2列放在中间...(我只是结合答案)For Bootstrap 3

<div class="row">
   <div class="col-lg-5 ">5 columns left</div>
   <div class="col-lg-2 col-centered">2 column middle</div>
   <div class="col-lg-5">5 columns right</div>
</div>

甚至,您可以通过将其添加到样式来使文本居中的列:

.col-centered{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

此外,还有另一种解决方案在这里