Question

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

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

Answer 1

以这种方式将row-center课程添加到行，col-center添加到col-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 Demo

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/#horizontal-alignment

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

2 个答案: