Question

好奇..我正在浏览代码bootstrap.css并看到以下内容..

.container {
  margin-right: auto;
  margin-left: auto;
}

.container:before,
.container:after {
  display: table;
  content: " ";
}

.container:after {
  clear: both;
}

.container:before,
.container:after {
  display: table;
  content: " ";
}

.container:after {
  clear: both;
}

似乎代码的一部分正在重复并做同样的事情......即使你把它从css代码中拿出来，具体如下：

.container:before,
    .container:after {
      display: table;
      content: " ";
    }

    .container:after {
      clear: both;
    }

似乎一切都很好，花花公子。

是错误还是疏忽？

Answer 1

这是一个错误，但一个月前是fixed。关于它是一个Bootstrap错误还是他们的CSS编译器中的一个错误LESS，存在一些争论。讨论LESS，Bootstrap的bugtrackers。

详细

Bootstrap CSS是从Less编译的，代码的这一特定部分来自grid.less，使用来自mixins.less的mixins。

弄清楚它为什么重复需要几层。相关的Less代码在这里：

// Set the container width, and override it for fixed navbars in media queries
.container {
  .container-fixed();

  @media (min-width: @screen-sm) {
    width: @container-sm;
  }
  @media (min-width: @screen-md) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}

使用mixin .container-fixed()：

// Centered container element
.container-fixed() {
  margin-right: auto;
  margin-left: auto;
  padding-left:  (@grid-gutter-width / 2);
  padding-right: (@grid-gutter-width / 2);
  .clearfix();
}

反过来使用mixin .clearfix()：

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

编辑：在进一步挖掘之后，错误是他们无意中两次定义.clearfix（）宏 - 一次在mixins.less，然后又在utilities.less。您可以使用以下LESS代码在less2css.org查看其中的操作：

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

.container {
   .clearfix();
}

.clearfix {
  .clearfix();
}

我不知道肯定说不够，但似乎第二个.clearfix被视为某种混合，并且正在循环。如果您将LESS版本（less2css.org上的“选项”按钮）切换到1.3.1或更早版本，则会出现递归错误 - 似乎LESS添加了一些代码来停止无限递归，但仍会生成一些重复项。

进一步说明：这个bug影响了所有有.clearfix（）mixin的东西 - 我说过去时，因为他们最近fixed this bug，即通过切换到另一种使用mixin的方式。

TL; DR ：是的，这是一个错误，但是他们fixed it一个月前。有一些关于LESS's bugtracker上的LESS错误或Bootstrap错误以及Bootstrap上的错误的讨论。

这是引导程序中的错误吗？

1 个答案:

详细