0

我尝试了新的 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 中的内容在单独的行上，而不是在中间偏移一列的一行上。我怎样才能让它正常工作？

提前致谢。

4

1 回答 1

0

我的猜测是您没有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文件。但是less.js应该在链接到main.less文件后添加。所以头部看起来像这样：

<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

于 2013-08-19T17:22:02.817 回答