首頁 > web前端 > css教學 > 如何防止 Bootstrap 3 導覽列折疊?

如何防止 Bootstrap 3 導覽列折疊?

Barbara Streisand
發布: 2024-11-24 03:43:17
原創
456 人瀏覽過

How Can I Prevent My Bootstrap 3 Navbar from Collapsing?

防止Bootstrap 3 中的導覽列折疊

Bootstrap 的導覽列提供了一種便捷的方法來創建適應不同螢幕尺寸的可折疊菜單。但是,在某些情況下,您可能想要停用折疊功能以保持選單始終可見。

解決方案

為了防止導覽列折疊,您可以覆蓋特定的CSS屬性:

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}
登入後複製

說明

  • 第一個屬性覆寫預設的.collapse行為,強制選單保持可見。
  • 第二個和第三個屬性確保左側和右側選單項目都向左浮動,將它們對齊在同一位置
  • 第四個屬性糾正了較小螢幕上右側菜單對齊的小問題。

範例程式碼

考慮導覽列的以下HTML 程式碼:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png" />
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>
登入後複製

透過應用提到的CSS 覆蓋如上所述,無論螢幕尺寸為何,此導覽列都將不再折疊。

以上是如何防止 Bootstrap 3 導覽列折疊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板