Question

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

Answer 1

这里正确回答了问题Center a column using 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列放在中间...... （我只是结合答案）对于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;
}

此外，还有另一种解决方案here

Answer 4

我尝试了上面给出的方法，但是这些方法在动态地增加其中一个cols中的内容的高度时会失败，它基本上会推动其他cols。

对我来说，基本的表格布局解决方案有效。

// Apply this to the enclosing row
.row-centered {
  text-align: center;
  display: table-row;
}
// Apply this to the cols within the row
.col-centered {
  display: table-cell;
  float: none;
  vertical-align: top;
}

中心在twitter bootstrap中对齐一列

4 个答案: