Bootstrap 3.0 RC2 mixins問題

Question

我嘗試了新的boostrap並想使用mixins，但它似乎對我的頁面沒有任何影響。我也嘗試了bootstrap文檔中沒有任何工作的例子。

混入

.wrapper { 
.make-row(); 
} 
.content-main { 
    .make-lg-column(8); 
} 
.content-secondary { 
    .make-lg-column(3); 
    .make-lg-column-offset(1); 
} 

HTML

<div class="wrapper"> 
    <div class="content-main">...</div> 
    <div class="content-secondary">...</div> 
</div> 

它給是在單獨的行，而不是對在中間一列的偏移一行中的每個格的內容的結果。我怎樣才能使這個工作正常？

在此先感謝。

Answer 1

我的猜測是，您沒有從less文件夾導入bootstrap.less。 less文件夾位於Bootstrap 3項目的根目錄中。我通常將less文件夾放在我的項目文件夾中，並製作一個main.less並將其導入到那裏。因此，可以說，你的項目文件夾如下所示：

然後你main.less應該是這樣的：

@import '../less/bootstrap.less'; 
.wrapper{ 
    .make-row(); 
} 
.content-main { 
    .make-lg-column(8); 
} 

.content-secondary { 
    .make-lg-column(3); 
    .make-lg-column-offset(1); 
} 

，並在你的HTML你只需要鏈接到main.less文件。但鏈接到main.less文件後應添加less.js。所以頭部分是這樣的：

<link rel="stylesheet/less" type="text/css" href="css/main.less" /> 
<script src="js/less-1.4.1.min.js" type="text/javascript"></script> 

，項目應在本地服務器上放（如甲基苯丙胺或XAMP），而不是通過雙擊打開靜態的index.html文件。

那麼你應該能夠看到它的工作，如果你有類似的東西在你的HTML正文如下：

<div class="wrapper"> 
    <div class="content-main"> 
     <div class="well"> 
      <h1>Left</h1> 
     </div> 
    </div> 
    <div class="content-secondary"> 
     <div class="well"> 
      <h1>Right</h1> 
     </div> 
    </div> 
</div> 

你甚至可以改善它，並通過使用HTML5標記它更多的語義。因此，舉例來說，您可以使用<section>將行<article>用作列（但顯然您需要爲您的文章提供特定的類）。喜歡的東西：

main.less

@import '../less/bootstrap.less'; 
section{ 
    .make-row(); 
} 
.main-content{ 
    .make-lg-column(5); 
} 

.secondary{ 
    .make-lg-column(7); 
} 

HTML

<section> 
    <article class="main-content"> 
     <div> 
      <h1>Main Content</h1> 
     </div> 
    </article> 
    <article class="secondary"> 
     <div> 
      <h1>Secondary content</h1> 
     </div> 
    </article> 
</section> 

我希望幫你。 Happy bootstrapping：D