首頁 >web前端 >css教學 >如何防止 Bootstrap 3 中的導覽列崩潰?

如何防止 Bootstrap 3 中的導覽列崩潰?

Barbara Streisand
Barbara Streisand原創
2024-11-18 10:00:031020瀏覽

How to Prevent Navbar Collapse in Bootstrap 3?

防止Bootstrap 3 中的導覽列折疊

在Bootstrap 3 中,導覽列可以在較小的螢幕上折疊以節省空間。這在許多情況下都很有用,但如果您想停用此行為並保持導覽列始終可見,請按以下方法操作。

自訂 CSS

至防止導覽列折疊,您需要覆寫一些預設的 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;
}
  • .navbar-collapse.collapse 覆寫預設的display 屬性,該屬性隱藏折疊的元素。相反,它將顯示設為 block,使其可見。
  • .navbar-nav>li,.navbar-nav 強制左側選單項目向左浮動.
  • .navbar- nav.navbar-right:last-child 為最右邊的選單項目提供一些細微的邊距調整。
  • .navbar-right 確保右側選單向右浮動。

實作

要實現這些更改,將提供的 CSS 添加到您的樣式表中。或者,您可以將樣式直接內聯到 HTML 程式碼中。

說明

這些 CSS 屬性共同作用,讓導覽列元素在所有螢幕尺寸上都可見。

  • .navbar-collapse.collapse 屬性會覆蓋折疊功能。
  • .navbar-nav>li、.navbar-nav.navbar-right 確保右側選單與左側選單正確對齊。

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn