我用 bootstrap5 創建了 3 列的頁面：
<div class="container">
<div class="row">
<div class="col-md-3">LEFT</div>
<div class="col-md-6">CENTER</div>
<div class="col-md-3">RIGHT</div>
</div>
</div>
現在在左右列中有 300px 寬度的廣告。如何限制左右列縮小小于 300 像素，并僅縮小中心列。
如果我在左側和右側設定 min-width:300px，則右列被向下推。
uj5u.com熱心網友回復：
不要使用固定（成比例）的列大小。使用Flex。這是一個例子。我已經縮小了這個演示的影像大小，但它對 300px 影像的作業方式相同。
您可能想要更改移動設備的行為，或者將所有內容堆疊起來，這樣它就不會奇怪地換行了。我不確定你的目標。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="d-flex flex-wrap">
<div><img src="https://via.placeholder.com/200"/></div>
<div class="flex-fill">CENTER</div>
<div><img src="https://via.placeholder.com/200"/></div>
</div>
</div>uj5u.com熱心網友回復：
您可以.col-md-*在 a 中模擬s的相同（堆疊到水平）行為，并.row使用 flex 在中間斷點處切換換行.flex-wrap.flex-md-nowrap。
嘗試這個：
.ad {
width: 300px;
background: cyan;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container-fluid">
<div class="d-flex flex-wrap flex-md-nowrap">
<div class="ad">LEFT</div>
<div class="w-100">CENTER</div>
<div class="ad">RIGHT</div>
</div>
</div>uj5u.com熱心網友回復：
最簡單的方法是使用 Grid自動布局列。col-auto將縮小以適應其內容（廣告）。然后，使用flex-nowrap以防止包裝...
<div class="container">
<div class="row flex-md-nowrap">
<div class="col-md-auto">
<img src="//via.placeholder.com/300" />
</div>
<div class="col-md">CENTER</div>
<div class="col-md-auto">
<img src="//via.placeholder.com/300" />
</div>
</div>
</div>
回應式演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/347987.html
標籤：html css 推特引导 bootstrap-5