css - 使用 bootstrap less mixins 创建新类？

Question

我有一个元素

HTML

<div class="content col-md-10 col-md-offset-1">
</div>

我在 LESS 中需要的是这样的

.content{
  .col-md-10;
  .col-md-offset-1;
}

以后我可以像这样使用更短的代码

<div class="content col-md-10 col-md-offset-1">
</div>

我知道我必须只使用这样的内容

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

我试过类似的方法但不起作用？

.content{
    .make-md-column(10);
    .make-md-offset(1);
}

Answer 1

更新

它叫做 make-md-<b>column</b>-offset不是make-md-offset

通过任何 Online Less Compiler 运行以下命令应该工作:

@grid-gutter-width: 30px;
@screen-md-min: 992px;
@grid-columns: 12;

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}

.content{
    .make-md-column(10);
    .make-md-column-offset(1);
}

原创

我的猜测是您在构建过程中缺少某些东西，例如导入混合函数或变量。

这是关于引导网格混合的部分:
http://getbootstrap.com/css/#grid-less

这是一个示例用法:

.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

所以你的语法看起来不错。我会确保您没有任何构建错误。