我如何在Twitter Bootstrap 3的容器(12列)中心一个列大小的div ?
.centered {
背景颜色:红色;
｝
<！——最新编译和最小化的CSS——>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="匿名">
<身体类= "容器" >
<div class=" font - family -宋体">
<img data-src="holder.js/100x100" alt="" /> .
< / div >
身体< / >
我想要一个div，类。居中在容器中。如果有多个div，我可能会使用一行，但现在我只想要一个div的大小为一列居中容器(12列)。
我也不确定上面的方法是否足够好，因为目的不是将div抵消一半。我不需要在div之外的自由空间和div的内容按比例缩小。我想清空div之外的空间，以均匀分布(收缩直到容器宽度等于一列)。
你可以使用文本中心的行，并可以确保内部divs有display:inline-block(与不浮动)。
As:
<div class="container">
<div class="row text-center" style="background-color : black;">
<div class="redBlock">A red block</div>
<div class="whiteBlock">A white block</div>
<div class="yellowBlock">A yellow block</div>
</div>
</div>
和CSS:
.redBlock {
width: 100px;
height: 100px;
background-color: aqua;
display: inline-block
}
.whiteBlock {
width: 100px;
height: 100px;
background-color: white;
display: inline-block
}
.yellowBlock {
width: 100px;
height: 100px;
background-color: yellow;
display: inline-block
}
小提琴:
http://jsfiddle.net/DTcHh/3177/
只需将显示内容的列设置为col-xs-12 (mobile-first;-)，并仅配置容器来控制您希望居中内容的宽度，因此:
.container {
背景颜色:蓝色;
｝
.centered {
背景颜色:红色;
｝
<body class="container col-xs-offset-3 col-xs-6">
<div class=" font - family -宋体">
<img data-src="holder.js/100x100" alt="" /> .
< / div >
身体< / >
<body class="container col-xs-offset-1 col-xs-10">
<div class=" font - family -宋体">
<img data-src="holder.js/100x100" alt="" /> .
< / div >
身体< / >
有关演示，请参见http://codepen.io/Kebten/pen/gpRNMe:-)
在Bootstrap 3中有两种方法来居中列<div>:
方法1(偏移量):
第一种方法使用Bootstrap自己的偏移类，因此不需要更改标记，也不需要额外的CSS。关键是将偏移量设置为行剩余大小的一半。例如，一个大小为2的列的居中偏移量为5，即(12-2)/2。
在标记中，这看起来像:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
这个方法有一个明显的缺点。它只适用于偶数列大小，因此只支持.col- x -2、.col- x -4、col-X-6、col-X-8和col-X-10。
方法2(旧边距:auto)
您可以通过使用已验证的边距来居中任何列大小:0 auto;技术。你只需要处理Bootstrap的网格系统添加的浮动。我建议像下面这样定义一个自定义CSS类:
.col-centered{
float: none;
margin: 0 auto;
}
现在你可以将它添加到任何屏幕大小的任何列中，它将与Bootstrap的响应式布局无缝配合:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
注意:使用这两种技术，您都可以跳过.row元素，并将列置于.container中居中，但您会注意到实际列大小的最小差异，因为容器类中的填充。
更新:
由于v3.0.1 Bootstrap有一个名为center-block的内置类，它使用margin: 0 auto，但缺少float:none，因此您可以将其添加到CSS中，使其与网格系统一起工作。
这可能不是最好的答案，但有一个更有创意的解决方案。正如koala_dev所指出的，列偏移只适用于相等的列大小。然而，通过嵌套行，您也可以实现居中不均匀的列。
坚持最初的问题，你想要在12个网格中居中一列1。
将2的列居中，使其偏移5
创建一个嵌套行，这样在2列中就有了新的12列。
因为你想要居中1列，而1是2的“一半”(我们在步骤1中居中)，现在你需要在嵌套行中居中一个6列，这很容易通过偏移3来实现。
例如:
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-2">
<div class="row">
<div class="col-md-offset-3 col-md-6">
centered column with that has an "original width" of 1 col
</div>
</div>
</div>
</div>
</div>
看到这里，请注意，你必须增加输出窗口的大小，以便太看到结果，否则列将自动换行。
