在 Bootstrap 中居中列

在 Web 开发中，一个经常使用的需求是将某个元素水平居中，特别是在布局中。

Bootstrap 居中列

使用 Bootstrap，可以通过在列的 class 属性中添加 .mx-auto 来实现居中。对于具有固定宽度的元素，这是一种简单而有效的方法。

例如，如果想要创建一个具有 500px 宽度的居中 div 元素，可以这样做：

<div class="container">
  <div class="row">
    <div class="col mx-auto" style="width: 500px;">
      <p>我会在水平中心！</p>
    </div>
  </div>
</div>

响应式居中

如果想要在不同的设备上具有不同的宽度和居中样式，可以使用 Bootstrap 的栅格系统。在这种情况下，应备份并将 mx-auto 类添加到所需的列上。

例如，如果想要在大型设备上使用 col-lg-6 样式并在中型设备上使用 col-md-8 样式，可以如下所示：

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-8 mx-auto">
      <p>我会在中心！</p>
    </div>
  </div>
</div>

结论

使用 Bootstrap，可以轻松地在 Web 应用程序中水平居中元素。无论是具有固定宽度的元素还是响应式元素，都可以使用 .mx-auto 类来实现。这使得布局更加易于管理和实现。