bootstrap 3 mixin multiple make - * - 列

我正在使用特定的mixin試圖讓我的代碼更清晰。因此，而不是使用：bootstrap 3 mixin multiple make - * - 列

<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大小）。這是爲不同視口大小創建列的正確方法嗎？任何想法？

如果我理解正確，您需要調用相反的（即'xs'到'lg'），否則'sm'樣式會覆蓋'md'和'lg'，因爲它們全都是用'min-寬度「查詢（不包括最大寬度）。順便說一句，同樣適用於HTML類的順序 - 即較小的應該先行。 –

就是這樣！非常感謝！如果你把它寫成答案，我會接受它。 –

以防萬一，以糾正我上面的評論。「HTML類的順序」實際上並不重要 - 只有它們在CSS中的順序是唯一重要的。 –

你應該重新排列你的mixin電話：

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

@七階段-MAX是正確的。 Bootstrap的代碼首先是移動的，這意味着當屏幕尺寸變得更寬時，您應該爲最小的屏幕寬度以及功能和屬性啓動代碼。

Bootstrap使用CSS媒體查詢來使CSS代碼響應。在您的情況.make-lg-column(3);編譯成如下所示的CSS代碼：

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

如果你寫.make-md-column(4);的.make-lg-column(3);後@media (min-width: 992px)意志來@media (min-width: 1200px)，也爲篩選評估true比1200像素寬等將覆蓋大柱代碼。

2014-11-02 14:27:36

回答