Я новичок в Bootstrap. Я хочу использовать сетку сетки жидкой сетки с разной высотой и такой же шириной, как и следующее изображение 
.
Как я могу реализовать то же самое? Пожалуйста, помогите мне.
Система загрузочной сетки Bootstrap с разной высотой
Ответ 1
Единственный способ сделать это с помощью Bootstrap "из коробки" - это использовать 4 столбца и суммировать элементы в каждом. Это не идеально подходит для динамического контента, когда вы не знаете, сколько элементов у вас будет в каждом столбце. Также порядок предметов сверху вниз, а не слева направо.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<!--item1-->
<!--item2-->
<!--item3-->
<!--item4-->
</div>
<div class="col-md-3">
<!--item5-->
<!--item6-->
<!--item7-->
<!--item8-->
</div>
<div class="col-md-3">
<!--item-->
<!--item-->
<!--item-->
</div>
<div class="col-md-3">
<!--item-->
<!--item-->
<!--item-->
<!--item-->
<!--item-->
</div>
</div>
</div>
В противном случае вы должны использовать плагин jQuery, например Masonry или Isotope или с использованием нескольких столбцов CSS3.
JQuery plugin method
Демо-версия макетницы Bootstrap
Демо-версия макета для Bootstrap 2
Метод столбцов CSS3 (решение для масоновского CSS).
Это не является родным для Bootstrap 3, но другой подход использует CSS-столбцы. Одним из недостатков этого подхода является порядок столбцов сверху вниз, а не слева направо.
В этом ответе также есть более подробная информация.
Обновление 2018
Bootstrap 4 включает масоновское решение с использованием нескольких столбцов CSS3: Кассовые карты Демо-версия
Ответ 2
Что касается бутстрапа 4 альфа-релиза:
Вы также можете использовать класс .card-columns для обертывания элементов класса bootstrap 4 .cards для достижения эффекта столбца "Масонство" @Skelly:
: https://v4-alpha.getbootstrap.com/components/card/#columns
Ответ 3
Скопируйте это в образец тела на свой html, так как это легче понять, чем объяснять.
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12" style="height:100px; background-color:red"></div>
<div class="col-md-12" style="height:100px; background-color:yellow"></div>
<div class="col-md-12" style="height:100px; background-color:gray"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12" style="height:200px; background-color:blue"></div>
<div class="col-md-12" style="height:100px; background-color:black"></div>
</div>
</div>
</div>
</div>
Ответ 4
Как я вижу, у вас есть фиксированная ширина в столбцах. Таким образом, вы можете написать
<div class="col-xs-4">
boxes
</div>
<div class="col-xs-4">
boxes
</div>
<div class="col-xs-4">
boxes
</div>
Ответ 5
Бутстрап v4.0.0-beta.2 Столбцы карт
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css'; return false;" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img" src="..." alt="Card image">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>