嗨我试图用引导程序4制作像https://www.pexels.com/的图像库，但引导程序不会像我想要的那样排列图片。
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<img src="imgsource" alt="">
</div>
</div>
</div>
CSS
img{
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<style>
ul {list-style: none}
</style>
</head>
<body>
<div class="row">
<ul>
<!-- first row -->
<li class="col-md-6"><img src=""></li>
<li class="col-md-2"><img src=""></li>
<li class="col-md-2"><img src=""></li>
<li class="col-md-2"><img src=""></li>
<!-- second row -->
<li class="col-md-5"><img src=""></li>
<li class="col-md-5"><img src=""></li>
<li class="col-md-2"><img src=""></li>
<!-- third row -->
</ul>
</div>
</div>
</body>
</html>
Height of the image must be same but width can vary.
Total screen contains 12 columns. According to the style choose the
column size.
我从未尝试过使用bootstrap，但我自己使用flex box构建。试试以下代码：
HTML：
<div class="photos" id="photoContainer">
<div class="photos__columns">
<div class="holders" id="0">
</div>
</div>
<div class="photos__columns">
<div class="holders" id="1">
</div>
</div>
<div class="photos__columns">
<div class="holders" id="2">
</div>
</div>
</div>
SCSS：
.photos {
display: flex;
max-width: 100%;
&__columns {
display: block;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
margin-right: 20px;
}
.holders {
display: flex;
flex-direction: column;
.images {
width: 100%;
margin-bottom: 20px;
height: auto;
}
}
}