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

问题描述

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

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

我正在使用:

<div class="stackOverflowRocksIt">

和我的mixins.less:

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

它在XS和SM视口中正常工作，但是在我调整为MD或LG尺寸(然后采用SM尺寸)时不起作用.这是为不同视口大小创建列的正确方法吗?有什么主意吗?

解决方案

您应该重新排序混合调用:

.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 (min-width: 1200px) {
  .stackOverflowRocksIt {
    float: left;
    width: 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屋！