Бутстрап-столбец, перекрывающий другой на средней ширине

Question

Я не понимаю, почему мои столбцы начальной загрузки перекрываются здесь. Я создал bootply, чтобы проиллюстрировать проблему, которую я попробовал, добавив div clefix сразу после деления col-xs-12, чтобы узнать, исправит проблему и что-то вроде этого, но заставил левую боковую панель перемещаться под правой рукой ,

Эта проблема только в том, что кажется средней шириной экрана и не знает, почему это происходит. Я знаю, что это связано с использованием hidden-xs и col-xs-12, но не понимаю, почему.

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

Это вопрос, связанный с clearfix. Родитель не получает размер плавающего дочернего элемента .

Для вашей проблемы просто объявите col-classes для другого окна просмотра, как показано выше, потому что они предотвращают такую ​​проблему.

Answer 2

Возможно, экран, на который вы изменяете размер, больше не вписывается в -md. Попробуйте изменить его на col-md-2 hidden-xs col-xs-2, то есть добавить col-xs-2 в первый и третий div. И вы заметите, что нет перекрытия столбцов.