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-column-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);
}

原始

我的猜测是你在构建过程中缺少一些东西，比如导入mixin函数或变量。

以下是关于bootstrap grid mixins的部分：
http://getbootstrap.com/css/#grid-less

以下是一个示例用法：

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

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

使用bootstrap less mixins创建新类？

1 个答案:

更新

原始