Question

我正在使用引导程序4，并将我的4列排成一行。当我转到移动设备时，我希望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

对于诸如智能手机之类的移动设备，您应该使用smalles断点类，该类仅为col-*，col-sm-*类适用于稍大的屏幕（例如手机的横向视图）。

您可以在Bootstrap Docs

中查看响应断点限制

注意：另外请注意，col-*类将从以后开始应用于指定的断点，因此，如果仅使用col-12，则元素将使用完整的在所有屏幕上使用，如果要更改此设置，则必须为col-md-4之类的较大设备设置另一个类，以便该元素在平板电脑屏幕上仅使用4列。

.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 -->

Answer 2

只需测试即可正常运行

<div class="row justify-content-center">
<div class="col col-12 col-sm-6 col-md-2">
Content Center
</div>
</div>

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

2 个答案: