Bootstrap 4 - col 与 col-sm-12 没有响应

Question

我使用 bootstrap 4 并将 4 列排成 1 行。当我转到移动设备时，我希望 4 列变成 1 列（本质上是每列添加一行。）

我的理解是，如果我将 col-sm-12 添加到我的 div 中，这将执行我想要的操作，但它不起作用。我缺少什么？

<div class="col col-sm-12">
<div>Required Forms</div>
<p>View what forms are required for shipping to the event.</p>
</div>
<!-- col -->

<div class="col col-sm-12">
<div>Invoice Instructions</div>
<p>Instructions on how to complete the commercial invoice form.</p>
</div>
<!-- col -->

<div class="col col-sm-12">
<div>Labeling &amp; Packing</div>
<p>Tips on packing and labeling your shipment.</p>
</div>
<!-- col -->

<div class="col col-sm-12">
<div>Wood Packing</div>
<p>Important information on wood packings (includes skids / pallets)</p>
</div>
<!-- col -->
</div>
<!-- row -->

Answer 1

对于智能手机等移动设备，您应该使用较小的断点类，即col-*，这些col-sm-*类适用于稍大的屏幕（例如手机的横向视图）。

您可以在Bootstrap 文档中检查响应断点限制

NOTE: Also keep in mind that the col-* classes will apply to the specified breakpoint onwards, so if you just use col-12, then the element will use the full with on all screens, if you want this to change you have to set another class for larger devices like col-md-4 so the element only uses 4 columns on tablet screens.

.col {
  border: 1px solid #000;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col col-12 col-sm-6 col-md-3">
    <div>Required Forms</div>
    <p>View what forms are required for shipping to the event.</p>
  </div>
  <!-- col -->

  <div class="col col-12 col-sm-6 col-md-3">
    <div>Invoice Instructions</div>
    <p>Instructions on how to complete the commercial invoice form.</p>
  </div>
  <!-- col -->

  <div class="col col-12 col-sm-6 col-md-3">
    <div>Labeling &amp; Packing</div>
    <p>Tips on packing and labeling your shipment.</p>
  </div>
  <!-- col -->

  <div class="col col-12 col-sm-6 col-md-3">
    <div>Wood Packing</div>
    <p>Important information on wood packings (includes skids / pallets)</p>
  </div>
  <!-- col -->
</div>
<!-- row -->