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>

它给出的结果是每个div中的内容在不同的行而不是在一行上，中间偏移一列。我怎样才能让它正常工作？

提前致谢。

Answer 1

我的猜测是您没有从bootstrap.less文件夹导入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>

并且应该将项目放在本地服务器（如mamp或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>

我希望能帮助你。快乐自举：D