我有一个问题，在一个列的居中行。下面是我的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)
Bootstrap的网格基于12列。12/5=2.4，并且引导程序实际上没有那种列宽度：）
选项#1-在每一侧添加1列（使用col-sm-1)。
null
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12 parent-col">
<div class="col-sm-1 child-col"></div>
<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 class="col-sm-1 child-col"></div>
</div>
</div>