twitter-bootstrap 如何使用引导程序将这 3 列居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29701827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how can I center these 3 columns using bootstrap
提问by kurasa
I'm relatively new to bootstrap I am trying to get the following 3 columns centered but they are off-center. The columns are col-md-3 each and the first one has an offset of 1 and I can understand why this is not centered but I can't work out how to get them centered.
我对引导程序相对较新，我试图将以下 3 列居中，但它们偏离中心。每列都是 col-md-3，第一个的偏移量为 1，我可以理解为什么这不居中，但我无法弄清楚如何使它们居中。
I have created the example in bootply
我在bootply 中创建了示例
回答by Tim Lewis
The issue with your layout is that in order to center your 3 columns, you would have to offset the left column by 1.5 (half of the leftover columns):
您的布局问题在于，为了使 3 列居中，您必须将左列偏移 1.5（剩余列的一半）：
// 12 Column Layout, 3 columns of col-md-3, offset of 1.5 needed (which isn't a class)
12 - (3 + 3 + 3) = 3 / 2 = 1.5
Since that won't work (as col-md-offset-1.5isn't a class) I think you have 2 options here:
由于这不起作用（因为col-md-offset-1.5不是课程），我认为您在这里有两个选择：
Option 1: Change your col-md-3to col-md-4and put it in a container:
选项 1：将您更改col-md-3为col-md-4并将其放入container：
<div class="container">
<div class="col-md-4 box">
<div>
<h4>box 1</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
<div class="col-md-4 box">
<div>
<h4>box 2</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
<div class="col-md-4 box">
<div>
<h4>box 3</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
</div>
Option 2: Change your col-md-3to col-md-2and col-md-offset-1to col-md-offset-3and put it in container-fluid:
选项 2：更改您的col-md-3tocol-md-2和col-md-offset-1tocol-md-offset-3并将其放入container-fluid：
<div class="container-fluid">
<div class="col-md-2 col-md-offset-3 box">
<div>
<h4>box 1</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
<div class="col-md-2 box">
<div>
<h4>box 2</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
<div class="col-md-2 box">
<div>
<h4>box 3</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
</div>
Both methods change the layout so that the full 12 columns are taken up (or offset correctly), but one gives you a bit more space to work with.
这两种方法都会更改布局，以便占据完整的 12 列（或正确偏移），但一种方法为您提供了更多的工作空间。
For more info on the Bootstrap Grid see the Documentation
有关 Bootstrap Grid 的更多信息，请参阅文档
回答by zwitterion
You can do this: Try to use a div wrap row with offset 2. The 3th block will be divided by 2 each side (1.5). And make a fuild container wrapping all.
您可以这样做：尝试使用偏移量为 2 的 div 环绕行。第 3 个块将每边除以 2 (1.5)。并制作一个完整的容器包装所有。
<div class="container-fluid">
<div class="row col-md-offset-2">
<div class="col-md-3 box">
<div>
<h4>box 1</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
<div class="col-md-3 box">
<div>
<h4>box 2</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
<div class="col-md-3 box">
<div>
<h4>box 3</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
</div>
</div>
回答by Kholiq Fadli
Try using column in column, and don't forget to use sequence container > row > col
尝试在列中使用列，不要忘记使用序列 container > row > col
<div class="container">
<div class="row">
<div class="col-md-*"></div>
<div class="col-md-*"></div>
</div>
</div>
.box{
background-color: lavender;
border:1px solid;
text-align: center;
}
.column{
background-color: AliceBlue;
margin: 5px;
text-align: center;
}<div class="container">
<div class="row">
<div class="col-lg-10 col-sm-offset-1">
<div class="col-md-4 box">
<div class="column">
<h4>box 1</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
<div class="col-md-4 box">
<div class="column">
<h4>box 2</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
<div class="col-md-4 box">
<div class="column">
<h4>box 3</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
</div>
</div>
</div>回答by Vincent Decaux
Using flex properties :
使用 flex 属性：
.centered {
display: flex;
justify-content: center;
}
And in your HTML :
在你的 HTML 中：
<div class="centered">
<div class="col-md-3">
<div>
<h4>box 1</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
<div class="col-md-3">
<div>
<h4>box 2</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
<div class="col-md-3">
<div>
<h4>box 3</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
</div>
