引导行容器的中心内容

我有下面的代码，我想把外部“ row”div 的“ well”元素居中。我已经尝试了各种方法，比如 text-along: center (它只是使文本居中，而不是使内部 DIV 元素居中。

这是 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>

294651 次浏览

小开

最佳答案

我通过以下方法解决了这个问题:

<body class="container-fluid">
<div class="row">
<div class="span6" style="float: none; margin: 0 auto;">
....
</div>
</div>
</body>

小开

试试这个，有用！

<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>

然后，在 css 中定义文档中居中的 div 和居中的宽度:

.center {
margin: 0 auto;
width: 80%;
}

小开

在 Bootstrap 4中，有一个 css 类专门针对这个问题:

<div class="row justify-content-center">
...inner divs and content...
</div>

参见: https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment，了解更多信息。

小开

对于 Bootstrap 4，使用以下代码:

<div class="mx-auto" style="width: 200px;">
Centered element
</div>

档号: https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering