Bootstrap 3 mixin 多个 make-*-column [英] Bootstrap 3 mixin multiple make-*-column

问题描述

我正在使用特定的 mixin 试图使我的代码更清晰.所以不要使用:

我正在使用:

在我的 mixins.less 中:

.stackOverflowRocksIt{.make-lg-column(3);.make-md-column(4);.make-sm-column(6);.make-xs-column(12);}

它适用于 XS 和 SM 视口，但当我调整为 MD 或 LG(然后采用 SM 尺寸)时就不行了.这是为不同视口大小创建列的正确方法吗?有什么想法吗?

解决方案

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

.stackOverflowRocksIt {.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(最小宽度:1200px){.stackOverflowRocksIt {向左飘浮;宽度:25%；}}

如果你在 .make-lg-column(3); 之后写 .make-md-column(4);; @media (min-width: 992px) 将出现 @media (min-width: 1200px) 并且还评估 true 屏幕宽度超过 1200px 并因此覆盖您的大列代码.

I'm using an specific mixin trying to make my code more clear. So instead of using:

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

I'm using:

<div class="stackOverflowRocksIt">

and in my mixins.less:

.stackOverflowRocksIt{
    .make-lg-column(3);
    .make-md-column(4);
    .make-sm-column(6);
    .make-xs-column(12);
}

It works properly with XS and SM viewports, but not when I resize to MD or LG (then is taking the SM size). Is this the proper way to create columns for different viewports sizes? Any idea?

解决方案

You should re-order your mixin calls:

.stackOverflowRocksIt {
    .make-xs-column(12);
    .make-sm-column(6);
    .make-md-column(4);
    .make-lg-column(3);
}

@seven-phases-max is right. Bootstrap's code is mobile first, which mean you should start your code for the smallest screen widths and features and properties when the screen size become wider.

Bootstrap use CSS media queries to make the CSS code responsive. In your situation the .make-lg-column(3); compiles into the CSS code that shown below:

@media (min-width: 1200px) {
  .stackOverflowRocksIt {
    float: left;
    width: 25%;
  }
}

If you write .make-md-column(4); after the .make-lg-column(3); the @media (min-width: 992px) will came @media (min-width: 1200px) and also evaluates true for screens wider than 1200px and so overwrites your large columns code.

这篇关于Bootstrap 3 mixin 多个 make-*-column的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！