non float: left on col-*-12 cause overlap of elements when the number of columns in a row add up to > 12

[bassjobsen]

Example:
`

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

`

see: http://stackoverflow.com/questions/18428450/bootstrap-3-layout-with-panel-display-not-correct-on-small-device/18433782

[cvrebert]

I believe you need to add a <div class="clearfix visible-sm"></div> as described in the "Responsive column resets" section of http://twbs.github.io/bootstrap/css/#grid

[bassjobsen]

You are right, i did not read well. But i found the problem described for col-*-12 classes (100% without float) only.
When you use one grid class:

<div class="container">     
<div class="row">
  <div class="col-xs-4 col-sm-3" style="background-color:navy;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-8 col-sm-3" style="background-color:blue;">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

  <div class="col-xs-10 col-sm-3" style="background-color:yellow;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-2 col-sm-3" style="background-color:red;">.col-xs-6 .col-sm-3</div>
</div>  
</div>

the "conditional" visible-xs, don't solve the problem for the large(r) grid. In this case you will need clear fix without responsive utility class (or clearfix hidden-xs maybe ?? ).
This seems 'complex', so what's wrong with adding a float:left to the col-*-12 classes?

[cvrebert]

I believe we added some trickery to make multiple responsive utility classes play better together, but anyway, yeah, you might need to tweak the condition on the clearfix div.
I'll reopen this so @mdo can consider your request.

[ghost]

It's may be not a good solution, but i did that:

[class*=col-]{
    & + .col-xs-12, & + .col-sm-12, & + .col-md-12 , & + .col-lg-12{
        float: left;
    }
}

[fabiogiolito]

Why not just float the .col-*-12? I didn't get why there's no float there.

[bassjobsen]

Will there be a rule which tells browsers width is more important than float now and in future? in the case of:

 <div class="row">
     <div style="background:red;width:100%;float:left;">col-md-12 (top)</div>
     <div style="background:yellow;width:100%;float:left;">col-md-12 (bottom)</div> 
</div>

[andikn32]

Is there any solution without adding empty clearing-divs?

I just don't understand why the "float:left" for the .col-*-12-classes has been removed?

[andikn32]

Look at this example. In my opinion the behaviour of both rows should be the same on the lg viewport. But in the first row the col-lg-12 got a float of the col-xs-4. That's why it doesn't make sense in my opinion to remove the float on col-12-classes

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-lg-4">One</div>
        <div class="col-xs-12 col-lg-82">Two</div>
        <div class="col-xs-4 col-lg-12">Three</div>
        <div class="col-xs-8 col-lg-12">Four</div>
    </div>
        <div class="row">
        <div class="col-lg-4">One</div>
        <div class="col-lg-2">Two</div>
        <div class="col-lg-12">Three</div>
        <div class="col-lg-12">Four</div>
    </div>
</div>

[giatro]

To prevent using .clearfix you can use .pull-left:

<div class="row">
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">.col-lg-2.col-md-3.col-sm-4.col-xs-6</div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">.col-lg-2.col-md-3.col-sm-4.col-xs-6</div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 pull-left">.col-lg-2.col-md-3.col-sm-4.col-xs-12.pull-left</div>
    <div class="col-lg-2 col-md-3 col-sm-12 col-xs-12 pull-left">.col-lg-2.col-md-3.col-sm-4.col-xs-12.pull-left</div>
    <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12 pull-left">.col-lg-2.col-md-3.col-sm-4.col-xs-12.pull-left</div>
    <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12 pull-left">.col-lg-2.col-md-3.col-sm-4.col-xs-12.pull-left</div>
</div>

instead of

<div class="row">
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">.col-lg-2.col-md-3.col-sm-4.col-xs-6</div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">.col-lg-2.col-md-3.col-sm-4.col-xs-6</div>
    <div class="clearfix visible-xs"></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">.col-lg-2.col-md-3.col-sm-4.col-xs-12</div>
    <div class="clearfix visible-sm"></div>
    <div class="col-lg-2 col-md-3 col-sm-12 col-xs-12">.col-lg-2.col-md-3.col-sm-4.col-xs-12</div>
    <div class="clearfix visible-md"></div>
    <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">.col-lg-2.col-md-3.col-sm-4.col-xs-12</div>
    <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">.col-lg-2.col-md-3.col-sm-4.col-xs-12</div>
</div>

[mdo]

Should be fixed by #11050.

[kmukku]

@mdo This issue still exists on 3.0.2. See http://jsfiddle.net/8Bg2H/

This can be fixed by using @adrienbecker's solution.

[acefxlabs]

@kmukku : Yes and that causes it to overlap.
To fix it, all i did was to add .col-sm-12, .col-md-12, .col-lg-12, .col-xs-12{ float: left; }

Not sure but it seem to globally fix all my issues