当小于12 col时,将多个bootstrap列居中

Question

<div class="row">
    <div ng-repeat="tile in tiles" class="col-md-3"></div>
</div>

如何确保这些引导列始终居中,即使它们只有2个？

Answer 1

以这种方式将row-center类添加到行和col-centercol-md-3:

<div class="row row-center">
  <div ng-repeat="tile in tiles" class="col-md-3 col-center"></div>
</div>

.row-center {
  text-align:center;
}

.col-center {
  display:inline-block;
  float:none;
}

Bootply演示

Answer 2

从引导程序 4 开始

此功能已添加！

你可以使用这个类： justify-content-center

所以你的代码应该是这样的：

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

检查引导程序文档：https : //getbootstrap.com/docs/4.0/layout/grid/#horizo​​ntal-alignment