在 Bootstrap 5 標記結構中，你可以使用 2 個<nav>元素來創建一個左右固定側邊欄，中間有內容嗎？像這樣的東西：
<nav>
<div>left sidebar</div>
</nav>
<main>
<div>main content</div>
</main>
<nav>
<div>right sidebar</div>
</nav>
基本的 bootstrap5 類會是什么樣子/css 來完成這項作業？
uj5u.com熱心網友回復：
Bootstrap 使用 12 列的網格系統。做到這一點的一種方法是將這些網格列值分配到單行內您喜歡的任何內容（我在此演示中使用了 2 - 8 - 2）
然后您可以position: sticky在每個nav. 這樣，在滾動瀏覽主要內容時，內容會粘在螢屏上。
/* ----- Resetting styling/demo purpose ----- */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper.row {
flex-wrap: nowrap;
margin: 0;
}
.wrapper.row>* {
padding: 0;
text-align: center;
}
/* ----- end ----- */
.col-md-2 {
background-color: tomato;
}
.col-md-2 div {
position: sticky;
top: 0;
}
.col-md-8 {
background-color: limegreen;
height: 175vh;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="wrapper row">
<nav class="col-md-2">
<div>left sidebar</div>
</nav>
<main class="col-md-8">
<div>main content</div>
</main>
<nav class="col-md-2">
<div>right sidebar</div>
</nav>
</div>uj5u.com熱心網友回復：
您是否正在尋找這樣的東西：
<div class="d-flex">
<div>left item, put me some width</div>
<div class="flex-fill">content item, will fill remaining</div>
<div>right item, put me some width</div>
</div>
如您所說，側欄是固定的（您需要將它們放在具有寬度的某個類中），中間的欄將擴展以填充父級的剩余寬度
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/483607.html