Twitter bootstrap 3 自举三列定位

我一直在尝试在一个容器内，将三列相等的列精确地对齐在一行的中心，两边填充相等。我无法将它们放置在页面中心。我已经尝试过为这三列所在的容器设置宽度。但布局一直朝一侧，从未在中心对齐

  <div class="container">
    <div class="row yellow">
      <div class="col-lg-12 ">
        <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
          test
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
          test
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
          test
        </div>

      </div>
    </div>
  </div>

测试
测试
测试

附件是我收到的输出：

如图所示，布局向右对齐，我希望它完全居中对齐，在这些列之间填充相等

知道如何实现这一点会很好，我已经试着做了一段时间了。你的建议肯定会有助于解决这个问题

---

提前感谢

您的问题是，您的布局没有总计到12列

col-lg-3

+

col-lg-3

+

col-lg-3

总计为9列，在引导网格系统中，每行有12列

也没有

colxxs-**

类。（lg=大型；md=中型；sm=小型；xs=超小型）

这应该可以做到：

<div class="container">
  <div class="row yellow">
    <div class="col-lg-12 ">
      <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
        test
      </div>
      <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
        test
      </div>
      <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
        test
      </div>
    </div>
  </div>
</div>

测试
测试
测试

查看Bootrstaps文档以了解有关网格系统的更多信息：

---

正如@Sadi所说，布局由12列组成，因此您应该将列从col-lg-3更改为col-lg-4。另外，您应该将绿色应用于内部容器，否则将没有填充：

<div class="container">
<div class="row yellow">
   <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center">
      <div class="green">
        test
        </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12  text-center">
      <div class="green">
        test
        </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12  text-center">
      <div class="green">
        test
        </div>
    </div>
</div>

测试
测试
测试

---

Codepen:

Hi@j.Sadi，感谢您提供的信息和宝贵的输入，这确实可以使专栏居中，而且在gianni的评论之后，我在专栏中添加了一个额外的div，它解决了这个问题。谢谢大家：）非常感谢大家的帮助在这种情况下，你可以在列中添加一个带填充的div，或者像我在这里做的那样构建一个css类来为“col-3”添加偏移量：谢谢你的回答，是的，添加一个额外的div确实解决了我的问题：）