引导图像网格 [重复]答案

【问题标题】：Bootstrap Image Grid [duplicate]引导图像网格 [重复]
【发布时间】：2018-09-12 12:01:43
【问题描述】：

我想创建一个响应式图像网格，如下图所示：

如何使用引导列和行来实现这一点？

<div class="row">
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
........
...........
.................
.....................
</div>

我将所有列放在一行内，以便列元素自行包裹，但这不会发生。当我实现上面的代码时，由于“高度：自动”，一些图像很长，这会在不同行的图像之间产生空白空间。结果我得到了这样的结果：

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您可以通过卡片栏来实现这一点。 JSFiddlehere:

<div class="container-fluid pt-3">
<div class="card-columns">
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
</div>
</div>

【讨论】：

【解决方案2】：

我认为仅使用引导程序是不可能的。寻找用于引导程序的砌体 (https://masonry.desandro.com/) 或同位素 (https://isotope.metafizzy.co/) 插件。

【讨论】：

【解决方案3】：

根据您的要求，您需要将col-3 替换为col-sm-3 或col-md-3 等：

img
{
  width: 100%;
  margin: 10px 0px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-3">
   <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Lights" >
   <img src="https://www.w3schools.com/w3images/falls2.jpg" alt="Lights" >
   <img src="https://www.w3schools.com//w3images/wedding.jpg"alt="Lights" >
  </div>
  <div class="col-3">
   <img src="https://www.w3schools.com/w3images/rocks.jpg" alt="Lights" >
   <img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Lights" >
  </div>
  <div class="col-3">
   <img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Lights" >
   <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" >
   <img src="https://www.w3schools.com//w3images/wedding.jpg"alt="Lights" >
  </div>
  <div class="col-3">
   <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Lights" >
   <img src="https://www.w3schools.com//w3images/rocks.jpg" alt="Lights" >
  </div>
</div>

【讨论】：