CSS 使用 offset 居中 Bootstrap 栅格列（仅适用于小设备）

在本文中，我们将介绍如何使用CSS中的offset属性来居中Bootstrap栅格列，特别是只在小设备上使用。

阅读更多：CSS 教程

什么是Bootstrap栅格系统？

Bootstrap是一个流行的前端开发框架，提供了一套栅格系统来构建响应式布局。栅格系统由一系列的行和列组成，可以将页面水平分割为12等分。通过在列上应用CSS类，我们可以轻松地为不同的设备大小设置不同的布局。

在小设备上使用offset属性

offset属性是Bootstrap栅格系统中的一个特性，用于通过添加空白列来调整布局。一般情况下，我们使用offset属性来在栅格列的左侧添加空白列，从而实现居中效果。在小设备上，可以通过使用offset来移动栅格列的位置，从而实现居中布局。

让我们以一个示例来说明如何在小设备上使用offset属性来居中Bootstrap栅格列。假设我们有以下HTML代码：

<div class="container">
  <div class="row">
    <div class="col-sm-4 offset-sm-4">
      <p>This column is centered on small devices.</p>
    </div>
  </div>
</div>

在上面的示例中，我们使用了col-sm-4类来创建一个占据四个栅格单元的列，并使用offset-sm-4类来在列的左侧添加四个栅格单元的空白列。这样，我们的列就会在小设备上水平居中。

为什么只在小设备上使用offset属性？

你可能会问，为什么我们只在小设备上使用offset属性来居中栅格列？原因是在大设备上使用offset属性时，空白列的数量将会增加，导致栅格列的间距变大，从而影响到整体布局。而在小设备上，由于每列所占据的栅格单元较少，通过添加空白列来居中不会对布局产生明显的影响。

示例：在小设备上居中两个栅格列

让我们通过一个具体的示例来演示如何在小设备上同时居中两个栅格列。假设我们有以下HTML代码：

<div class="container">
  <div class="row">
    <div class="col-sm-4 offset-sm-2">
      <p>This is the first centered column.</p>
    </div>
    <div class="col-sm-4 offset-sm-2">
      <p>This is the second centered column.</p>
    </div>
  </div>
</div>

在上面的示例中，我们使用了col-sm-4类来创建两个占据四个栅格单元的栅格列，并使用offset-sm-2类来在每个栅格列的左侧添加两个栅格单元的空白列。这样，两个栅格列就会在小设备上水平居中，且彼此之间有相等的间距。