twitter-bootstrap 引导中心 3 col-md-3 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30846378/
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
bootstrap center 3 col-md-3 divs
提问by user979331
I have a wrapper like so:
<div class="community-images"></div>
我有一个像这样的包装器：
<div class="community-images"></div>
and inside this wrapper I have 3 col-md-3 divs:
在这个包装器中，我有 3 个 col-md-3 div：
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
what I am trying to do is center these 3 divs inside the wrapper, how would I accomplish this ?
我想要做的是将这 3 个 div 集中在包装器内，我将如何实现这一点？
Here is the CSS:
这是CSS：
.community-images {
padding: 40px 0px 40px 0px;
}
.col-md-3 {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
min-height: 300px;
box-shadow: 10px 10px 5px #888888;
}
采纳答案by Manoj Kumar
Update: This is good solution for normal layout, not for Twitter Bootstrap as it disrupts the Bootstrap behaviour. Check Jeben's answer for a better layout.
更新：这是正常布局的好解决方案，而不是 Twitter Bootstrap，因为它会破坏 Bootstrap 行为。检查 Jeben 的答案以获得更好的布局。
A modern browsers solution and apt for your problem. Flexbox technique with justified content.
现代浏览器解决方案，适合您的问题。具有合理内容的 Flexbox 技术。
@media (min-width:992px) {
.community-images {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
}
回答by jeben
Centering floating (moreover responsive) elements like the bootstrap columns requires some work with the margins, like yuyokk suggested.
像引导列这样的居中浮动（而且响应式）元素需要对边距进行一些处理，就像 yuyokk 建议的那样。
Or you can unfloat the elements and use inline-block :
或者您可以取消浮动元素并使用 inline-block ：
.community-images {
text-align: center;
}
.col-md-3 {
float: none;
display: inline-block;
text-align: left; //reset the text alignement to left
}
Works everywhere, including IE8.
适用于任何地方，包括 IE8。
回答by iurii
There are col-md-offset classes. Unfortunately you need col-md-offset-1-and-half class in order to have 12 cols in sum.
有 col-md-offset 类。不幸的是，您需要 col-md-offset-1-and-half 类才能总共有 12 个 cols。
I'm talking about 1.5 + 3 + 3 + 3 + 1.5 = 12
我说的是 1.5 + 3 + 3 + 3 + 1.5 = 12
So you can write you own class to offset the col. Smth like this.
因此，您可以编写自己的类来抵消 col。像这样。
@media (min-width: 992px) {
.col-md-offset-1-and-half {
margin-left: 12.499999995%; // col-md-offset-1 has 8.33333333
// so you multiply 8.33333333 * 1.5 = 12.499999995%
}
}
<div class="col-md-3 col-md-offset-1-and-half"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
回答by Alec Smart
For anyone using Bootstrap 4, this feature has been added: http://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content
对于使用 Bootstrap 4 的任何人，已添加此功能：http: //v4-alpha.getbootstrap.com/layout/grid/#variable-width-content
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-12 col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-12 col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
回答by Kuldip Vadalia
Code :
代码 ：
<div class="community-images">
<div class="col-md-3 community-margin"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
css :
css :
@media (min-width: 768px) {
.community-margin{
margin-left: 12.5%;
}
}
.community-images {
padding: 40px 0px 40px 0px;
}
.col-md-3 {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
min-height: 300px;
box-shadow: 10px 10px 5px #888888;
}
Try above code. You definitely get a solution. You can refer below link also : https://wordpress.com/post/wpkuldip.wordpress.com/61
试试上面的代码。你肯定会得到一个解决方案。您也可以参考以下链接：https: //wordpress.com/post/wpkuldip.wordpress.com/61
