Question

所以我想我只是开始了解更少和引导。我正在建立一个响应式主题，其中一个问题是我有一个带有1px边框的跨度，这个1px边框自然会增加宽度并抛出整个东西，当然我可以在跨度上打另一个类来覆盖宽度：300设置并使其成为299，但是因为它是一个响应主题，我将不得不为各种屏幕宽度编写几个类。

我只是尝试将mixin写入较少的bootstrap并成功编译它，但是mixin似乎没有显示为类 - 它不在编译CSS文件中。这是mixin.less文件中的代码 - 我的添加在“Wedit”下面：

.offset (@columns) {
  margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
}

.span (@columns) {
  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}

//Wedit
.spanBorder (@columns) {
  width: ((@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1))) - 1;
}

我假设也许我必须在另一个文件或其他内容中调用.spanBorder，但不知道我在哪里或者我是否正确。等式的目的是简单地从原始宽度中获取1px（因此1px边界不会引起任何问题）。

Answer 1

.spanBorder是一个“功能”，您还需要.spanBorderX以及对此的调用：.spanBorderX (@gridColumns);

请参阅.core（默认网格）的complet代码：

  .core (@gridColumnWidth, @gridGutterWidth) {

    .spanX (@index) when (@index > 0) {
      .span@{index} { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

    .spanBorderX (@index) when (@index > 0) {
      .spanBorder@{index} { .spanBorder(@index); }
      .spanBorderX(@index - 1);
    }
    .spanBorderX (0) {}


    .offsetX (@index) when (@index > 0) {
      .offset@{index} { .offset(@index); }
      .offsetX(@index - 1);
    }
    .offsetX (0) {}

    .offset (@columns) {
      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
    }

    .span (@columns) {
      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
    }

    .spanBorder (@columns) {
     width: ((@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1))) - 1;
     }

    .row {
      margin-left: @gridGutterWidth * -1;
      .clearfix();
    }

    [class*="span"] {
      float: left;
      min-height: 1px; // prevent collapsing columns
      margin-left: @gridGutterWidth;
    }

    // Set the container width, and override it for fixed navbars in media queries
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container { .span(@gridColumns); }

    // generate .spanX, .spanBorderX and .offsetX
    .spanX (@gridColumns);
    .spanBorderX  (@gridColumns);
    .offsetX (@gridColumns);

  }

在重新编译之后将此代码添加到mixins.less，您现在可以使用：

  <div class="row"><div class="spanBorder6" style="background-color:red;border-left:1px solid blue;">test</div><div class="spanBorder6" style="background-color:red;border-left:1px solid blue;">test</div></div>

当然spanBorder1，spanBorder2等也可以。

使用较少的mixin扩展Twitter的Bootstrap 2.x默认网格（span类）

1 个答案: