Как сделать чтобы не было пустых мест под блоками Bootstrap

Антон Пивоваров

Как сделать чтобы не было пустых мест под блоками как показано на картинке.

<div class=" row ">
<!--?php foreach ($data['category'] as $news) { ?-->
<div class="col-sm-6 col-md-4"> <div class="thumbnail"> <div> </div> <div class="caption"> <p><a href="News/item/<?php echo $news['id'] ?>" class="btn btn-primary" role="button">Перейти</a> </p> </div> </div>
</div>
<!--?php } ?-->
</div>
3 ответа

Антон Пивоваров

Еще как вариант

.b-columns{ columns: 3; column-gamp: 10px;
}
.b-columns-item{ -webkit-column-break-inside: avoid; /* Chrome, Safari */ page-break-inside: avoid; /* Theoretically FF 20+ */ break-inside: avoid-column; /* IE 11 */
}
<div class="container"> <div class="row b-columns"> <div class="b-columns-item"> <div class="thumbnail"> <div class="caption"> <h3>Title</h3> <p>Как сделать чтобы не было пустых мест под блоками Bootstrap Как сделать чтобы не было пустых мест под блоками Bootstrap</p> </div> </div> </div> <div class="b-columns-item"> <div class="thumbnail"> <div class="caption"> <h3>Title</h3> <p> Как сделать чтобы не было пустых мест под блоками Bootstrap Как сделать чтобы не было пустых мест под блоками Bootstrap</p> </div> </div> </div> <div class="b-columns-item"> <div class="thumbnail"> <div class="caption"> <h3>Title</h3> <p> Как сделать чтобы не было пустых мест под блоками Bootstrap Как сделать чтобы не было пустых мест под блоками Bootstrap</p> </div> </div> </div> <div class="b-columns-item"> <div class="thumbnail"> <div class="caption"> <h3>Title</h3> <p> Как сделать чтобы не было пустых мест под блоками Bootstrap</p> </div> </div> </div> <div class="b-columns-item"> <div class="thumbnail"> <div class="caption"> <h3>Title</h3> <p> Как сделать чтобы не было пустых мест под блоками Bootstrap</p> </div> </div> </div> <div class="b-columns-item"> <div class="thumbnail"> <div class="caption"> <h3>Title</h3> <p> Как сделать чтобы не было пустых мест под блоками Bootstrap</p> </div> </div> </div> <div class="b-columns-item"> <div class="thumbnail"> <div class="caption"> <h3>Title</h3> <p> Как сделать чтобы не было пустых мест под блоками Bootstrap</p> </div> </div> </div> <div class="b-columns-item"> <div class="thumbnail"> <div class="caption"> <h3>Title</h3> <p> Как сделать чтобы не было пустых мест под блоками Bootstrap</p> </div> </div> </div> <div class="b-columns-item"> <div class="thumbnail"> <div class="caption"> <h3>Title</h3> <p>Как сделать чтобы не было пустых мест под блоками Bootstrap Как сделать чтобы не было пустых мест под блоками Bootstrap</p> </div> </div> </div> <div class="b-columns-item"> <div class="thumbnail"> <div class="caption"> <h3>Title</h3> <p>Как сделать чтобы не было пустых мест под блоками Bootstrap Как сделать чтобы не было пустых мест под блоками Bootstrap</p> </div> </div> </div> </div>
</div>


Антон Пивоваров

Нужно задать им минимальную высоту

В стилях блока: min-height: 200px; (вместо 200 - нужная Вам высота)


Антон Пивоваров

если нет привязки конкретно к bootstrap, можете попробовать flex'ы

.f-row { display: flex; flex-flow: row nowrap;
}
.f-col { border: 2px solid green; flex-basis: 33%;
}
<div class="f-row"> <div class="f-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, dolores.</div> <div class="f-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fuga quisquam blanditiis fugiat necessitatibus, autem enim quam repudiandae reprehenderit dolores.</div> <div class="f-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quaerat perspiciatis incidunt dolor magnam natus, totam nisi *****? Obcaecati beatae sapiente laudantium delectus eos unde officia, eligendi recusandae accusamus mollitia.</div>
</div>

licensed under cc by-sa 3.0 with attribution.