1

I don't understand why my bootstrap columns are overlapping here. I've created a bootply, to illustrate the issue I tried adding a cleafix div directly after the col-xs-12 div to see if it would fix the issue and it sort of did, but it forced the left hand sidebar to move beneath the right hand one.

This issue is only at what appears to be medium screen widths and don't know why this is happening. I know it has to do with using hidden-xs and the col-xs-12, but don't understand why.

Pythonista
  • 11,377
  • 2
  • 31
  • 50

2 Answers2

1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-2 col-xs-12 col-sm-12 hidden-xs">
    <div style="background-color:orange;">
      <h3>A random title</h3>
    </div>
  </div>
  <div class="col-md-8 col-sm-12 col-xs-12 ">
    <div style="background-color:blue;">
      <h1>Some Random Title</h1>
    </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-2 hidden-xs">
    <div style="background-color:red;">
      <h4>DFSDSDF</h4>
    </div>
  </div>

</div>

This is an issue related to clearfix. The parent doesn't gets the height of floated child.

For your issue, simply declare col-classes for other viewport as well as shown above, because, they prevent such issue.

Community
  • 1
  • 1
Deepak Yadav
  • 6,804
  • 5
  • 31
  • 49
0

Probably, the screen to which you're resizing doesn't fit into -md- anymore. Try changing it to col-md-2 hidden-xs col-xs-2, that is, add col-xs-2 to the first and third div. And you'll observe there's no overlapping of columns.

ShivangiBilora
  • 2,912
  • 4
  • 20
  • 27