請幫助我創建像螢屏截圖一樣的塊：
現在我創建了 2 行并且有一些問題。我不知道如何洗掉行之間的距離。需要像螢屏截圖一樣
.service-container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 332px;
width: 100%;
}
.service-container:before {
content:'';
flex-basis:100%;
width:0;
order:2;
}
.service-container:after {
content:'';
flex-basis:100%;
width:0;
order:2;
}
.service-container .link {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
padding:32px;
box-shadow:0px 4px 4px rgba(94,126,137,0.1);
border-radius:8px;
background:#fff;
height:110px;
margin:0 6px 6px;
width:calc(20% - 12px);
}
.service-container .link a {
font-family:"Myriad Pro Regular";
font-size:24px;
font-weight:700;
line-height:26px;
text-align:center;
color:#4CB9D4;
}
.service-container .item-2 {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
padding:32px;
border-radius:8px;
background:#90D4E5;
height:100px;
margin:0 6px 6px;
width:calc(40% - 12px);
}
.service-container .item-3 {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
padding:32px;
border-radius:8px;
background:#006580;
height:71px;
margin:0 6px 6px;
width:calc(20% - 12px);
}
.service-container .item-5 {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
padding:32px;
border-radius:8px;
background:#90D4E5;
height:100px;
margin:0 6px 6px;
width:calc(20% - 12px);
}
.service-container .item-7 {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
padding:32px;
border-radius:8px;
background:#4CB9D4;
height:100px;
margin:0 6px 6px;
width:calc(20% - 12px)
}
.service-container .item-9 {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
padding:32px;
border-radius:8px;
background:#90D4E5;
height:94px;
margin:0 6px 6px;
width:calc(20% - 12px);
}<div class="service-container">
<div class="item-1 link"><a href="#">Skin & Dermatology</a></div>
<div class="item-2"> </div>
<div class="item-3"> </div>
<div class="item-4 link"><a href="#">Dental Clinic</a></div>
<div class="item-5"> </div>
<div class="item-6 link"><a href="#">ENT Clinic</a></div>
<div class="item-7"> </div>
<div class="item-8 link"><a href="#">Internal Medicine Clinic</a></div>
<div class="item-9"> </div>
</div>我正在使用 Twitter Bootstrap 5。在我的網站上，它現在如下所示：
我需要洗掉行之間的距離。我該怎么做？謝謝
uj5u.com熱心網友回復：
你真正想要的是創建一個砌體。您可以在網上找到幾個庫，例如：https ://masonry.desandro.com/
但由于您使用的是 Bootstrap 5，您可以使用此插件： https ://getbootstrap.com/docs/5.0/examples/masonry/
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473117.html
下一篇：覆寫引導字體大小