2016-01-19 2 views
0

У меня есть эта простая струя на BootStrap.Как удалить промежуток между колонками?

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4 blue-section" ><p>Some content</p></div> 
    <div class="col-md-4 red-section"><p>Some content</p></div> 
    <div class="col-md-4 green-section"><p>Some Content</p></div> 
    </div> 
</div> 

CSS-пользовательский файл:

.container{ width:100%;} 
.row{ background-color:#000;} 

.blue-section{background-color:blue;} 
.red-section{background-color:red;} 
.green-section{background-color:green;} 

Когда я изменить размер страницы и столбцы складывают друг на друга, существует разрыв между ними и пробел после последнего с той же высоты предыдущие пробелы. Как я могу удалить эти пробелы? Находится на .row или находится на .col-*-*? Благодаря

+0

Вы хотите, чтобы тот же самый взгляд на устройства меньшего размера? – Raviteja

ответ

1

Пробелы вызваны margin-bottom на p тегов. удалить margin-bottom от последнего элемента внутри col-md-4 увидеть последнюю строку в следующем CSS (я добавил дополнительные пункты, чтобы продемонстрировать только целенаправленные последний элемент):

.container{ width:100%;} 
 
.row{ background-color:#000;} 
 

 
.blue-section{background-color:blue;} 
 
.red-section{background-color:red;} 
 
.green-section{background-color:green;} 
 

 
.col-md-4 > *:last-child { 
 
    margin-bottom: 0; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4 blue-section"> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
    </div> 
 
    <div class="col-md-4 red-section"> 
 
     <p>Some content</p> 
 
    </div> 
 
    <div class="col-md-4 green-section"> 
 
     <p>Some Content</p> 
 
    </div> 
 
    </div> 
 
</div>

Вы» Я хочу, чтобы область видимости последней линии тоже правильно ...

Смежные вопросы