Bootstrap混入和Web Essentials問題

Web Essentials和Bootstrap混合是否存在已知問題？我得到不正確的CSS（可重複 - 請參閱下面的代碼）。Bootstrap混入和Web Essentials問題

我正在使用bootstrap.less包並使用Web Essentials將較少的文件編譯爲css。（VS 2013 +更新1 /最新的Web要領）

所以，如果我創建了一個簡單的頁面，像這樣，一切正常：也就是2周的div水平堆疊，直到我的瀏覽器窗口變得過小，那麼他們疊加垂直。現在

<div class="container"> 
    <!-- this row uses no LESS--> 
    <div class="row"> 
    <div class="col-sm-12 col-md-6"> 
     <span>Div1</span> 
    </div> 
    <div class="col-sm-12 col-md-6"> 
     <span>Div2</span> 
    </div> 
    </div> 
</div>

，如果我創建的LESS

@import (reference) 'bootstrap/bootstrap.less'; 

.div-container { 
    .make-md-column(6); 
    .make-sm-column(12); 
}

然後這個小塊更改我的代碼是這樣的：

<div class="container"> 
    <!-- this row uses the bootstap LESS mixin (css compiled with Web Essentials)--> 
    <div class="row"> 
     <div class="div-container"> 
      <span>Div1</span> 
     </div> 
     <div class="div-container"> 
      <span>Div2</span> 
     </div> 
    </div> 
</div>

它停止工作 - 特別是div的垂直堆疊，甚至在中等或寬度上。

現在，我認爲我輸入的LESS完全等同於我在第一個片段中使用的裸類。

我認爲問題在於WebEssentials/Visual Studio不能正確編譯LESS。

我認爲這是問題，因爲如果我查看生成的CSS，其中沒有媒體查詢，但bootstrap mixin文件（mixins.less是特定的）指定媒體查詢hte .make- xx-col mixins。

我可能不是第一個打這個的人，所以我必須做錯事。有沒有解決方法？我錯了什麼配置？是否有其他一些我應該使用的LESS編譯解決方案，而不是Web Essentials？

來源

2014-01-29 JMarsch

對mixin重新排序，以便編譯後的css輸出不會覆蓋具有較大最小寬度的選擇器。

減：

.div-container { 
    .make-sm-column(12); 
    .make-md-column(6); 
}

CSS：

.div-container { 
    position: relative; 
    min-height: 1px; 
    padding-left: 15px; 
    padding-right: 15px; 
} 
@media (min-width: 768px) { 
    .div-container { 
    float: left; 
    width: 100%; 
    } 
} 
@media (min-width: 992px) { 
    .div-container { 
    float: left; 
    width: 50%; 
    } 
}

來源

2014-02-14 17:29:25 lesser

Yah - 這就是他們在bootstrap主頁上告訴我的，但它不起作用。我複製粘貼你的更少，保存（VS），並讓Web Essentials生成CSS。輸出沒有媒體查詢。第一部分（帶有位置，最小高度和填充的.div容器）完全匹配您的輸出。儘管沒有媒體查詢。 – JMarsch

@import (reference) 'bootstrap/bootstrap.less'; 

.div-container { 
    .make-md-column(6); 
    .make-sm-column(12); 
}

我覺得這是一個簡單的文件導入problem..Try使用

@import '../../../bootstrap/bootstrap.less';

或者使用修改代碼'../../../'.. 這是一個無能的東西......

注： -

如果您正在使用Web基本..Then你應該導入文件，如this.Otherwise的.LESS到的CSS轉換將不會工作。

@import "../../../content/bootstrap/variables.less"; 
@import "../../../content/bootstrap/mixins.less"; 
@import "../../../content/bootstrap/utilities.less";

來源

2014-06-20 05:33:51

Bootstrap混入和Web Essentials問題

回答

相關問題