Bootstrap white break in grid system

Question

Моя загрузочная панель дает белый перерыв, когда я добавляю содержимое в правую боковую панель. Я попытался изменить col-mds и добавить clearfix, но это не сработало.

Изображение: https://i.snag.gy/54SNqw.jpg

Код:

.panel { 
 
    margin-bottom: 20px; 
 
    background-color: #fff; 
 
    border: 1px solid #dadada; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
} 
 
.custom-header-panel { 
 
    background-color: #004b8e !important; 
 
    border-color: #004b8e !important; 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-md-8"> 
 
    <div class="panel"> 
 
     <div class="panel-heading custom-header-panel"> 
 
     <h3 class="panel-title roboto">Profile info</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="panel"> 
 
     <div class="panel-heading custom-header-panel"> 
 
     <h3 class="panel-title roboto">Profile info</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     This doesn't work. tste 
 
     <br>test 
 
     <br>test 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-8"> 
 
    <div class="panel"> 
 
     <div class="panel-heading custom-header-panel"> 
 
     <h3 class="panel-title roboto">Profile info</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-8"> 
 
    <div class="panel"> 
 
     <div class="panel-heading custom-header-panel"> 
 
     <h3 class="panel-title roboto">Profile info</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Любая идея, чтобы это исправить?

Answer 1

Сначала вам нужно добавить внешний div - container-fluid, после этого вам нужно добавить div с классом row который обертывает panel.

Перерывы появляются потому, что все классы col-*-* (а также container-fluid) имеют по умолчанию левый и правый отступы равны 15px. Класс row компенсирует эти прокладки отрицательными левыми и правыми полями равными -15px.

На самом деле, вы можете просто добавить класс row в <div class="panel">, но это не очень правильное решение.

.panel { 
 
    margin-bottom: 20px; 
 
    background-color: #fff; 
 
    border: 1px solid #dadada; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
} 
 
.custom-header-panel { 
 
    background-color: #004b8e !important; 
 
    border-color: #004b8e !important; 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 
    <div class="col-md-8"> 
 
    <div class="row"> 
 
    <div class="panel"> 
 
     <div class="panel-heading custom-header-panel"> 
 
     <h3 class="panel-title roboto">Profile info</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="row"> 
 
    <div class="panel"> 
 
     <div class="panel-heading custom-header-panel"> 
 
     <h3 class="panel-title roboto">Profile info</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     This doesn't work. tste 
 
     <br>test 
 
     <br>test 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-8"> 
 
    <div class="row"> 
 
    <div class="panel"> 
 
     <div class="panel-heading custom-header-panel"> 
 
     <h3 class="panel-title roboto">Profile info</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-8"> 
 
    <div class="row"> 
 
    <div class="panel"> 
 
     <div class="panel-heading custom-header-panel"> 
 
     <h3 class="panel-title roboto">Profile info</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>