在Less中混合使用Bootstrap类？

Question

在Less中混合使用Bootstrap类？

4

如果我在Bootstrap中做这样的事情，在HTML中，一切都正常工作。

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 content"> </div>

但是当我想要嵌套Bootstrap Col类时出现了问题？如何在LESS或SASS中混合col Bootstrap类，总是得到未定义的结果，必须将col放在外面。

.content
{
.make-lg-column(9);
.make-md-column(9);
.make-sm-column(9);
.make-xs-column(9);
}

- Schneider

2个回答

1

我会尽力帮助您翻译中文，以下是需要翻译的内容：

我将把这个问题理解为：

我想要替换这个

  <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 content"> </div>

使用此代码。

 <div class="content"> </div>

我刚刚做了同样的事情，我通过以下链接完成了它：

快速总结。安装dotless和bootstrap，dotless有点过时，所以需要调整bootstrap文件。最终，您将获得一个包含所有.less文件内容的单个.less文件

可能有比使用dotless更好的方法，因为它已经过时，但它确实可行。

只是补充一下，您的css是正确的，您只需要放置框架。

- tony

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rubyist · Accepted Answer

您需要导入bootstrap.less文件。为此，下载完整的bootstrap项目，然后复制less文件夹。然后将less文件夹放入您的项目中。如果您想在工作时编译less，请确保将less.js文件添加到您的项目中。有关更多信息，请查看lesscss.org。

示例： custom.less

@import "../less/bootstrap.less";

 section {
    .make-row();
}
.left-navigation {
    .make-sm-column(3);
}
.main-content {
    .make-sm-column(9);
}

也许这对你有用。