Question

我不明白为什么我的引导列在这里重叠。我已经创建了一个bootply，以说明我尝试在col-xs-12 div之后直接添加一个cleafix div的问题，看它是否能解决这个问题而且它有点做了，但它强迫了左手侧边栏在右手边移动。

此问题仅出现在中等屏幕宽度上，并且不知道为什么会发生这种情况。我知道它与使用hidden-xs和col-xs-12有关，但不明白为什么。

Answer 1

＆＃13;

<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>

＆＃13;

这是与clearfix相关的问题。父母没有得到漂浮的孩子的高度。

对于您的问题，只需为其他视口声明col-classes以及上面显示的内容，因为它们会阻止此类问题。

Answer 2

您正在调整大小的屏幕可能不再符合-md-。尝试将其更改为col-md-2 hidden-xs col-xs-2，即将col-xs-2添加到第一个和第三个div。你会发现没有列的重叠。

Bootstrap列以中宽度

2 个答案: