如果您運行以下代碼并懸停渲染的元素，您將看到left和middle元素之間有一個未占用的空間：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3" id="left">
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
</div>
</div>
<div class="col-sm-6" id="middle">get me lefter, to the unoccupied space</div>
<div class="col-sm-3" id="right"></div>
</div>
</div>...這是你會看到的（紫色是未占用的空間）：
是否可以添加 CSS 來強有力地告訴left讓middle使用未占用的空間（如果存在）？
另外，Bootstrap 是否有一些內置的 CSS ？
uj5u.com熱心網友回復：
我認為這是因為您定義了將要使用的列 ( col-sm-3)。
使用您的約束（不重組 HTML），您可以修改#leftdiv 的類col-sm-auto，告訴#left它只占用它需要的空間，這樣就沒有未使用的空間并且#middle可以占用舊的未使用空間。
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-auto" id="left">
<div class="row">
<div class="col-sm-auto">1</div>
<div class="col-sm-auto">2</div>
<div class="col-sm-auto">3</div>
</div>
</div>
<div class="col-sm-6" id="middle">get me lefter, to the unoccupied space</div>
<div class="col-sm-3" id="right"></div>
</div>
</div>注意第col-sm-auto1、2 和 3 項上的類。還告訴他們使用所需的寬度，而不是定義 12 列中的 1 列，以免產生未使用的空間。
uj5u.com熱心網友回復：
我建議使用一排。將兩個單獨的行嵌套在另一個行中將無法正常作業，因為一行試圖占據整個容器的寬度。這就是為什么在檢查col-sm-1's周圍的 flex-box 時會看到額外的紫色。將它放在一行中將使其保持在同一行并使用未占用的空間。
div.col-sm-1 {
width: fit-content;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3" id="left"></div>
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-6" id="middle">get me lefter, to the unoccupied space</div>
<div class="col-sm-3" id="right"></div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/359952.html
標籤：css 推特引导 bootstrap-5