Question

我一直试图将三个相等的列精确地排列在行的中心，两侧的填充相等，位于容器流体内。我无法将它们放在页面的中心。我已经尝试将宽度设置为这三列所在的容器。但是布局保持一致，永远不会在中心对齐。

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

附件是我收到的输出： output

如图所示，布局向右对齐，我希望它在这些列之间以完全对齐的方式与相等的填充对齐。

知道如何实现这一点会很好，我一直试图让这个完成。你的建议肯定有助于解决这个问题。

提前致谢

Answer 1

您的问题是，您的布局未汇总为12列..

col-lg-3 + col-lg-3 + col-lg-3总计为9列，在bootstraps网格系统中，每行有12列。

也没有col-xxs-**类。 （lg = large; md = medium; sm = small; xs = extra small）

这样做的伎俩：

<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文档以了解有关网格系统的更多信息：http://getbootstrap.com/css/#grid

Answer 2

正如@Sadi所说，布局由12个cols组成，因此你可以将列从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：https://codepen.io/giannidk/pen/ZymdOy

bootstrap三列定位

2 个答案: