html - 这是 Bootstrap 中的错误吗？

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 .

详情

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 .您可以在 less2css.org 看到它的运行情况。使用此 LESS 代码:

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

.container {
   .clearfix();
}

.clearfix {
  .clearfix();
}

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

进一步说明:这个错误影响了所有有 .clearfix() 混合的东西——我用过去时说，因为他们最近 fixed this bug ，即切换到使用混合宏的不同方式。

TL;DR:是的，这是一个错误，但他们 fixed it一个月前。在 LESS's bugtracker 上有一些关于它是 LESS bug 还是 Bootstrap bug 的讨论。回到Bootstrap .