Bootstrap 3 mixin 多个 make-*-column

Posted 2023-02-22

【中文标题】Bootstrap 3 mixin 多个 make-*-column

【英文标题】：Bootstrap 3 mixin multiple make-*-column

【发布时间】：2014-08-18 08:30:56

【问题描述】：

我正在使用特定的 mixin 来使我的代码更清晰。所以不要使用：

<div class="col-lg-3 col-md-5 col-sm-6 col-xs-12">

我正在使用：

<div class="***RocksIt">

在我的 mixins.less 中：

.***RocksIt
    .make-lg-column(3);
    .make-md-column(4);
    .make-sm-column(6);
    .make-xs-column(12);

它适用于 XS 和 SM 视口，但当我调整为 MD 或 LG 时（然后采用 SM 尺寸）则无法正常工作。这是为不同视口大小创建列的正确方法吗？有什么想法吗？

【问题讨论】：

如果我理解正确，您需要反向调用它们（即xs 到lg），否则sm 样式会覆盖md 和lg，因为它们都设置为只是一个min-width 查询（没有max-width）。顺便说一句，同样适用于 html 类顺序 - 即较小的应该先行。

就是这样！非常感谢！如果您将其写为答案，我会接受。

以防万一纠正我上面的评论。 “HTML 类的顺序”实际上并不重要——只有它们在 CSS 中的顺序才是重要的。

【参考方案1】：

你应该重新排序你的 mixin 调用：

.***RocksIt 
    .make-xs-column(12);
    .make-sm-column(6);
    .make-md-column(4);
    .make-lg-column(3);

@seven-phases-max 是对的。 Bootstrap 的代码是移动优先的，这意味着当屏幕尺寸变宽时，您应该针对最小的屏幕宽度以及功能和属性开始您的代码。

Bootstrap 使用 CSS 媒体查询来使 CSS 代码具有响应性。在您的情况下，.make-lg-column(3); 编译成如下所示的 CSS 代码：

@media (min-width: 1200px) 
  .***RocksIt 
    float: left;
    width: 25%;
  

如果您在.make-lg-column(3); 之后写.make-md-column(4);，则@media (min-width: 992px) 将出现@media (min-width: 1200px)，并且还会对大于1200 像素的屏幕评估true，因此会覆盖您的大列代码。