我正在使用引導程式制作影像行。在手機螢屏上，每行應該有 2 張影像。在每個大于手機的螢屏尺寸上，每行應該有 3 張影像。下面的代碼適用于比手機更大的螢屏，但在手機上，它會在第三張圖片之后留下一個空白區域。我如何使它在移動設備上沒有丟失的空間？
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<div class="row no-gutters">
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
</div>
<div class="row no-gutters">
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
</div>uj5u.com熱心網友回復：
有什么理由有兩行嗎？如果沒有，這就是解決方案。
請參閱下面的片段。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<div class="row no-gutters">
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
<div class="col-6 col-sm-4">
<img src="https://via.placeholder.com/600" style="max-width: 100%;">
</div>
</div>uj5u.com熱心網友回復：
你可能想要原始的 flexbox而不是行和列。在自定義類上使用 flex-basis 來處理包裝。
由于“大于手機”并不是特別具體，我使用了中斷點（768px）來對應Bootstrap 的原生斷點。您可能更喜歡 992 像素甚至 1200 像素。
Protip：Bootstrap 已經有一個用于影像最大寬度的類（無論如何你都不應該使用行內樣式——在需要的地方創建自定義類）。
.img-box {
flex-basis: calc(100%/2);
}
@media (min-width: 768px) {
.img-box {
flex-basis: calc(100%/3);
}
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<div class="d-flex flex-wrap">
<div class="img-box">
<img src="https://via.placeholder.com/600" class="img-fluid">
</div>
<div class="img-box">
<img src="https://via.placeholder.com/600/ccaaaa" class="img-fluid">
</div>
<div class="img-box">
<img src="https://via.placeholder.com/600" class="img-fluid">
</div>
<div class="img-box">
<img src="https://via.placeholder.com/600/ccaaaa" class="img-fluid">
</div>
<div class="img-box">
<img src="https://via.placeholder.com/600" class="img-fluid">
</div>
<div class="img-box">
<img src="https://via.placeholder.com/600/ccaaaa" class="img-fluid">
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507482.html
上一篇：使用媒體查詢隱藏引導下拉選單