twitter-bootstrap Bootstrap 行容器的中心内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13462535/
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
Center Contents of Bootstrap row container
提问by Gregg
I have the code below and I'd like to center the "well" elements of the outer "row" div. I've tried various approaches such as text-align: center (which just centers the text and not the inner DIV elements.
我有下面的代码，我想将外部“行”div 的“井”元素居中。我尝试了各种方法，例如 text-align: center （它只是将文本居中而不是内部 DIV 元素。
Here is a jsfiddle. The idea is that I get a page of "well" tiles and that after 4 or so it wraps. But if it is less than 4, they should appear centered on the page.
这是一个jsfiddle。这个想法是我得到一页“井”瓷砖，然后在 4 左右后它包装。但是如果它小于 4，它们应该出现在页面的中央。
<body class="container-fluid">
<div class="row">
<div class="well span2">
<div class="row">
<div class="span2">
Header
</div>
</div>
<div class="row">
<div class="span2">
Sub Header
</div>
</div>
</div>
<div class="well span2">
<div class="row">
<div class="span2">
Header
</div>
</div>
<div class="row">
<div class="span2">
Sub Header
</div>
</div>
</div>
</div>
</body>
回答by Ayo I
With Bootstrap 4, there is a css class specifically for this. The below will center row content:
对于 Bootstrap 4，有一个专门用于此的 css 类。下面将居中行内容：
<div class="row justify-content-center">
...inner divs and content...
</div>
See: https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment, for more information.
有关更多信息，请参阅：https: //v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment。
回答by Gregg
I solved this by doing the following:
我通过执行以下操作解决了这个问题：
<body class="container-fluid">
<div class="row">
<div class="span6" style="float: none; margin: 0 auto;">
....
</div>
</div>
</body>
回答by Ezequiel
Try this, it works!
试试这个，它有效！
<div class="row">
<div class="center">
<div class="col-xs-12 col-sm-4">
<p>hi 1!</p>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 2!</p>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 3!</p>
</div>
</div>
</div>
Then, in css define the width of center div and center in a document:
然后，在 css 中定义文档中 center div 和 center 的宽度：
.center {
margin: 0 auto;
width: 80%;
}
回答by Fakhruddin Ujjainwala
For Bootstrap 4, use the below code:
对于 Bootstrap 4，使用以下代码：
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Ref: https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering
参考：https: //getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering
