Question

我正在尝试使用bootstrap 4网格系统将单个列居中。在bootstrap 3中，我能够做到：

<div class="col-md-10 col-md-offset-2">
</div>

在引导程序4中，即使使用新的偏移量类offset-md-2，该操作也不起作用。

以下方法可行，但是将页面上的空白列居中以使col-md-5居中会感到有些不对。

<div class="row">
    <div class="col"></div>
    <div class="col-md-5 align-self-center">
        <img src="img/myimage.gif" style="width: 100%;">
    </div>
    <div class="col"></div>
</div>

Answer 1

您可以添加

调整内容中心

在“行”分区上

所以会是这样：

<div class="container">
  <div class="row justify-content-center">
    <div class="col-2">
      //content ...
    </div>
  </div>
</div>

这是来自官方引导文档的示例 https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

与per the documentation一样，您可以在行上使用justify-content-center将行中任意数量的列居中。

<div class="row justify-content-center">
  <div class="col-4">
    One centered column
  </div>
</div>

使用bootstrap 4网格系统将单个列居中

2 个答案: