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