<分区>
<分区>
我在将一行中的列居中时遇到问题。这是我的 html 的样子:
<div class="row">
<div class="col-sm-12 parent-col">
<div class="col-sm-2 child-col">itemOne</div>
<div class="col-sm-2 child-col">itemTwo</div>
<div class="col-sm-2 child-col">itemThree</div>
<div class="col-sm-2 child-col">itemFour</div>
<div class="col-sm-2 child-col">itemFive</div>
</div>
</div>
我尝试过:
.parent-col { float: none; margin: 0 auto; } //This did not work
.child-col { float: none; display: inline-block; } //This works, but I then lose responsiveness.
.col-sm-offset-1 on parent-col. //This also works. However, it is not EXACTLY centered. One side is about 4px larger than the other.
关于如何或可能为什么我无法居中列或保持响应能力，还有其他想法吗？
最佳答案
如果您想让子列在父列中居中，您可以将偏移量添加到第一个子列:
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-offset-1 col-sm-2">itemOne</div>
<div class="col-sm-2">itemTwo</div>
<div class="col-sm-2">itemThree</div>
<div class="col-sm-2">itemFour</div>
<div class="col-sm-2">itemFive</div>
</div>
</div>
</div>
将偏移量放在父列上实际上会在该行中放置 13 列，因此您希望子列加起来为 12(1 个偏移量，列中总共 10 个，然后余数为 1 = 12)
关于css - 在一行中居中列 BOOTSTRAP，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40900471/