如何在引导程序中将列设置为较小？

Question

我似乎无法弄清为什么col-sm无法正常工作。我将其设置为col-sm-6，如果两个div应该在较小的屏幕上彼此并排显示，但它不起作用。。这是我的代码。

Employee.Salary_Grade_Id = Salary_Grades.Grade_Id

Answer 1

默认情况下

• col-*适用于所有宽度
• col-sm-*从576px开始应用（并覆盖col-*）
• col-md-*从768px开始应用（并覆盖col-sm-*和col-*）
• col-lg-*从992px开始应用（并覆盖较小的内容）
• col-xl-*从1200px开始使用（并覆盖较小的值）。

Relevant documentation。

注意：网格断点can be changed（如果需要）以及列数。

---

您似乎希望col-sm-*在其断点以下应用。为此，将col-sm-*替换为col-*：

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2 col-md-3 col-6">
      <img src="..." class="img-fluid">
    </div>
    <div class="col-lg-2 col-md-3 col-6">
      <img src="..." class="img-fluid">
    </div>
    ...
  </div>
  ...
</div>