在 less 中混合 col bootstrap 类？答案

【问题标题】：Mixing col bootstrap classes in less?在 less 中混合 col bootstrap 类？
【发布时间】：2014-01-23 22:38:51
【问题描述】：

如果我在 bootstrap 和 html 中做这样的事情，一切正常。

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

但是当我想嵌套 bootstrap col 类时会出现问题吗？如何在 LESS 或 SASS 中混合 col 引导类，我总是没有定义，必须 col 在外面

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

【问题讨论】：

标签： twitter-bootstrap less mixins

【解决方案1】：

您应该导入 bootstrap.less 文件。为此，请下载完整的引导项目，并复制 less 文件夹。然后将 less 文件夹放入您的项目中。如果您想在工作时编译 less.js 文件，请确保将 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);
}

也许这对你有用。

【讨论】：

好的，关闭，但如果我添加一些东西，这 deos 不能正常工作 .make-lg-column(9); .make-md-column(9); .make-sm-column(9); .make-xs-column(9);
@user3165604 在编辑之前考虑您的问题：“混合类”和“嵌套它”之间存在差异。你的目标是什么？如果您需要将“引导 col 类”“嵌套”到“.content”中，您期望什么 CSS 输出？（这个答案和我上面的评论假设你需要混合它，因为在这种情况下嵌套没有多大意义——但我们可能会错过一些东西）。
我只是想在html中短小类，可以吗？
初级班的短缺意味着？你想从主文件或其他东西中分离出一些语法吗？
不，我想在 html 中缩短类 nema？

【解决方案2】：

我选择将此问题解读为：

我想换这个

  <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是正确的，你只需要适当的框架

【讨论】：