Bootstrap: .make-row() and .clearfix error

Created on 7 Jan 2014  路  7Comments  路  Source: twbs/bootstrap

Hello.
I don't know is this is error or may be i do something wrong... but .make-row() mixin don`t work correctly.

in my less file:

.product-view {
    .make-row();
}

output css file is:

.product-view {
  margin-left: -15px;
  margin-right: -15px;
}

in bootstrap mixin.less file present row:

&:extend(.clearfix all);

and i thing that rule don`t work :(

i compile my less files via command line, under mac os x, with official $ lessc programm.

can you tell me what is wrong? if need more info just tell me please.

ps: at this moment i fix problem like:

.product-view {
    .make-row();
    .clearfix();
}

and in output css get:

.product-view {
  margin-left: -15px;
  margin-right: -15px;
}
.product-view:before,
.product-view:after {
  content: " ";
  display: table;
}
.product-view:after {
  clear: both;
}

Most helpful comment

in my mixins.less file i done next:

//
// Bootstrap core variables and mixins
// --------------------------------------------------
@import "../default/bootstrap/less/mixins.less";

//
// Mixins
// --------------------------------------------------

// Grid System
// -----------

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  .clearfix();
}

All 7 comments

Might be a bug of bootstrap

The .make-row mixin works fine鈥攚e use it in the Bootstrap core.

.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
  &:extend(.clearfix all);
}

Your clearfix styles will be getting applied with the .clearfix class somewhere in your compiled CSS.

@mdo, thanks for reply.
Yes, i understand that it should be applied, but it's not.
I re-check it twice. Also i had think that my lessc program not updated, but

$ lessc -v
lessc 1.6.0 (LESS Compiler) [JavaScript]

At this moment i think that something wrong with lessc. I try compile with grunt, like bootstrap...

I can confirm I just ran into the same issue when upgrading to Bootstrap 3.1. The code worked fine in Bootstrap 3.0.2, but after upgrading, I was not seeing the clearfix's properly applied to any element with the .make-row() or similar mixin that used &:extend(.clearfix all);.

I'm also using less 1.6.0.

Reverting to .clearfix() from &:extend(.clearfix all); change from 0016c17f9307bc71fc96d8d4680a9c861f137cae does fix the problem.

in my mixins.less file i done next:

//
// Bootstrap core variables and mixins
// --------------------------------------------------
@import "../default/bootstrap/less/mixins.less";

//
// Mixins
// --------------------------------------------------

// Grid System
// -----------

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  .clearfix();
}

Successor issue: #12409.

If you fall here as I did (importing bootstrap 3.x grid + less), if less extend clearfix is not working, just do this somewhere in your project (as suggested by @dak and @klerik):

.row {
    .clearfix();
}

Thank you guys.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bellwood picture bellwood  路  3Comments

tiendq picture tiendq  路  3Comments

devfrey picture devfrey  路  3Comments

matsava picture matsava  路  3Comments

alvarotrigo picture alvarotrigo  路  3Comments