如何减少引导网格系统的代码？

Question

我正在使用引导程序编写一些代码，我经常使用"container-fluid col-lg-3 col-md-3 col-s-3 col-xs-3" 或"container-fluid 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>

Answer 2

如果宽度在所有屏幕尺寸上都是三列，则不需要这么多类。从最小的屏幕 col-xs-3 开始就足够了，所有断点的宽度都相同。另一件事不要将列类与容器类一起使用。 Bootstrap 结构先是容器，然后是行，然后是列。