Bootstrap 行容器的中心内容
Posted
技术标签:
【中文标题】Bootstrap 行容器的中心内容【英文标题】：Center Contents of Bootstrap row container 【发布时间】：2012-11-07 21:22:16 【问题描述】：我有下面的代码，我想将外部“行”div 的“井”元素居中。我尝试了各种方法，例如 text-align: 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>
【问题讨论】：
【参考方案1】：使用 Bootstrap 4，有一个专门用于此的 css 类。下面将居中行内容：
<div class="row justify-content-center">
...inner divs and content...
</div>
请参阅：https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment，了解更多信息。
【讨论】：
最新引导：getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment 太棒了，这就是答案！ 完美！谢谢！【参考方案2】：我通过以下方式解决了这个问题：
<body class="container-fluid">
<div class="row">
<div class="span6" style="float: none; margin: 0 auto;">
....
</div>
</div>
</body>
【讨论】：
刚跑了一个测试，需要注意的是只需要添加样式。【参考方案3】：对于 Bootstrap 4，使用以下代码：
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
参考：https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering
【讨论】：
【参考方案4】：试试这个，它有效！
<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的宽度：
.center
margin: 0 auto;
width: 80%;
【讨论】：
以上是关于Bootstrap 行容器的中心内容的主要内容，如果未能解决你的问题，请参考以下文章