CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
op1001
op1001

Reputation: 348

is this an error in bootstrap?

Just curious.. I was going through the code bootstrap.css and saw the following..

.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;
}

It seems that a portion of the code is repeating and does the same thing... even if you take it out of the css code specifically the following:

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

    .container:after {
      clear: both;
    }

it seems that all works fine and dandy.

Is it an error or oversight?

Upvotes: 0

Views: 170

Answers (1)

cincodenada
cincodenada

Reputation: 3087

It was a bug, but was fixed a month ago. There is some debate on whether it was a Bootstrap bug, or a bug in their CSS compiler, LESS. Discussion on bugtrackers for LESS, Bootstrap.

Details

Bootstrap CSS is compiled from Less, and this particular section of the code comes from grid.less, using mixins from mixins.less.

Figuring out why it's duplicating requires going down a couple layers. The relevant Less code is here:

// 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;
  }
}

Which uses the 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();
}

Which in turn uses the mixin .clearfix():

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

EDIT: After some further digging, the bug was that they had inadvertently defined the .clearfix() macro twice - once in mixins.less and then again in utilities.less. You can see it in action at less2css.org with this LESS code:

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

.container {
   .clearfix();
}

.clearfix {
  .clearfix();
}

I don't know enough LESS to say for sure, but it seems that the second .clearfix is being treated as some sort of mixin, and is looping. If you switch the LESS version ("Options" button at less2css.org) to 1.3.1 or earlier, you get a recursion error - it seems LESS added some code to stop the infinite recursion, but some duplicates still get generated.

Further notes: this bug affected everything that had a .clearfix() mixin - I say that in past tense, because they recently fixed this bug, namely by switching to a different way of using the mixins.

TL;DR: Yes, it was a bug, but they fixed it a month ago. There is some discussion of whether it was a LESS bug or a Bootstrap bug on LESS's bugtracker and back over on Bootstrap.

Upvotes: 2

Related Questions