html - 如何减少 Bootstrap 网格系统的代码？

Question

我正在用 Bootstrap 编写一些代码，我经常使用 "container-fluid col-lg-3 col-md-3 col-s-3 col-xs-3" 或 “容器流体 col-lg-6 col-md-6 col-s-6 col-xs-6”。我想知道是否有一种方法可以减少我编写的代码，而不是多次编写这些行。

谢谢

Answer 1

col-lg-3 col-md-3 col-s-3 col-xs-3 实际上等同于仅使用 col-xs-3

考虑网格类的最佳方式是它们从移动端开始工作。这意味着默认情况下，您的网格将从移动设备向上堆叠，直到达到您使用的网格类断点。

例如，使用 .col-lg-4 意味着您的网格将在移动设备、平板电脑和小型桌面屏幕上保持堆叠状态。只有在到达大桌面断点之前，网格才会水平。

旁注:

col-s-3 应该是 col-sm-3。

container-fluid 是容器类，不应与列类一起使用

一般结构应该是这样的:

<div class="container-fluid">
     <div class="row">
         <div class="col-xx-x">
            Column
         </div>
         <div class="col-xx-x">
            Column
         </div>
     </div>
     <div class="row">
        ...
     </div>
</div>