在本 Bootstrap 4 教學中,我們將向您展示如何建立具有兩行的導覽列。這是具有大量導航選項或想要分離不同類型導航的網站的常見設計模式。
要遵循此操作,您需要:
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <h3>新增兩個Rows</h3> <p>要將兩行,我們將在navbar-collapse div 上使用flex-column 類別。這將導致 navbar-collapse div 的子元素垂直堆疊。 </p> <pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column"> <h3>新增導航連結</h3> <p>現在我們有兩行,我們可以將導航連結新增至它們。我們將建立兩個 ul 元素,每一行一個。 </p> <pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column"> <h3>結果</h3> <p>這是產生的包含兩行的導覽列:</p> <pre class="brush:php;toolbar:false"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-column"></div></nav>
以上是如何使用 Bootstrap 4 建立兩行導覽列?的詳細內容。更多資訊請關注PHP中文網其他相關文章!