在行引导程序中对中列[副本]

Question

我有一个问题，在一个列的居中行。下面是我的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. 

有什么其他的想法，如何或可能为什么我不能集中或保持回应？

Answer 1

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>

Answer 2

如果您试图使子列居中于父列,则可以将偏移量添加到第一个子列：

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