如何在 Bootstrap 4 中建立響應式導覽列側邊欄抽屜？

使用 Bootstrap 5 內建的 Offcanvas 元件

Bootstrap 5 Beta 3 引進了一個新的 Offcanvas 元件。該組件使創建側邊欄變得簡單。

您可以在 Bootstrap 網站上查看此元件的使用範例。

在Bootstrap 4 中建立響應式導覽列側邊欄抽屜

要在Bootstrap 4 中建立響應式導覽列側邊欄抽屜，您可以結合使用折疊、堆疊藥丸和flexbox 。

先建立一個容器 div，其類別為 container-fluid，高度為 100vh。

<div class="container-fluid h-100">
  ...
</div>

在容器 div 內，建立兩行。第一行將包含側邊欄，第二行將包含主要內容。

<div class="row h-100">
  <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark">

側邊欄應該被賦予一個折疊類別以預設隱藏它。您可以新增一個按鈕來切換側邊欄的可見性。

<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
  Menu
</button>  

對於主要內容，使用 col 類別來填充剩餘的可用空間。

<div class="col">
  ...
</div>

要讓側邊欄黏性，將 Sticky-top 類別加入側邊欄的導覽列。

<ul class="nav flex-column navbar-dark sticky-top">
  ...
</ul>

最後，加入一些 CSS設定側邊欄的樣式並使其回應。

@media (min-width: 768px) {
  #collapseExample {
    width: 250px;
  }
}

這將使側邊欄在寬度大於 768 像素的螢幕上變為 250 像素寬。

以上是如何在 Bootstrap 4 中建立響應式導覽列側邊欄抽屜？的詳細內容。更多資訊請關注PHP中文網其他相關文章！