在 Bootstrap 4 中，.col-、.col-sm-、.col-md-、.col-lg- 和 .col-xl- 这些类用于创建响应式网格布局。它们的主要区别在于它们在不同屏幕尺寸下的表现。具体来说，这些类的前缀表示不同的屏幕大小，具体如下：

1. .col-: 这是一个通用的列类，适用于所有屏幕大小。如果你只使用 .col-，它会在所有屏幕尺寸上占据相同的宽度。

2. .col-sm-: 适用于小型设备（≥576px）。如果你在小型设备上使用这个类，它会在小型设备及以上的屏幕上生效。

3. .col-md-: 适用于中型设备（≥768px）。这个类在中型设备及以上的屏幕上生效。

4. .col-lg-: 适用于大型设备（≥992px）。这个类在大型设备及以上的屏幕上生效。

5. .col-xl-: 适用于超大型设备（≥1200px）。这个类在超大型设备上生效。

示例

假设你使用了以下代码：

<div class="row">
  <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Column 1</div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Column 2</div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Column 3</div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Column 4</div>
</div>

在这个例子中：

• 在超小屏幕（如手机）上，每个列会占据全部宽度（12列），因此会堆叠在一起。

• 在小屏幕（≥576px）上，每个列会占据 6 列宽度（2 列在一行）。

• 在中屏幕（≥768px）上，每个列会占据 4 列宽度（3 列在一行）。

• 在大屏幕（≥992px）上，每个列会占据 3 列宽度（4 列在一行）。

• 在超大屏幕（≥1200px）上，每个列会占据 2 列宽度（6 列在一行）。

通过使用这些类，开发者可以轻松创建适应不同屏幕尺寸的响应式布局。