Question

如果我在bootstrap中执行类似的操作，在html中，一切正常。

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

但问题是，当我想嵌套bootstrap col类？如何在LESS或SASS中混合col引导类，总是我得到了解决，必须在外面

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

Answer 1

您应该导入bootstrap.less文件。为此下载完整的bootstrap项目，并复制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);
}

可能这对你有用。

Answer 2

我选择将此问题视为：

我想替换这个

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

用这个

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

我刚刚做了同样的事情，我通过这些链接做到了

http://yingtechthink.blogspot.co.uk/2014/03/using-less-bootstrap-3-and-font-awesome.html
Define variables in one LESS file
dotless on Azure Web Project doesn't understand &:extend

快速摘要。安装dotless和bootstrap，dotless有点过时，因此bootstrap文件需要调整。最终你得到一个单独的.less文件，其中包含所有.less文件的内容

这可能是一个更好的方法来做到这一点，而不是使用无点，因为它已经过时但它确实有效

添加，你的css是正确的，你只需要框架

混合col bootstrap类减少？

2 个答案: