首頁 > web前端 > css教學 > 如何將 Bootstrap 3 導覽列中的內容置中?

如何將 Bootstrap 3 導覽列中的內容置中?

Barbara Streisand
發布: 2025-01-04 04:46:40
原創
585 人瀏覽過

How to Center Content in a Bootstrap 3 Navbar?

將內容集中在響應式引導導覽列

問題:

示例代碼:

<nav class="navbar navbar-default" role="navigation">
  <!--- ... -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!--- ... -->
    </ul>
  </div>
</nav>
登入後複製

答案:

方法:

要讓內容居中,修改CSS .navbar .navbar-nav 和。刪除預設的float: left 屬性。 navbar .navbar-nav,允許專案對齊並排。

設定顯示:inline-block;使導航項目內聯元素,保持適當的間距。
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}
登入後複製

使用 text-align: center; 將文字放在導覽列中居中;on .navbar .navbar-collapse。

附加說明:

  • 如果您只想在較大的螢幕上實現這種居中效果,請將CSS 包圍在媒體查詢,針對適當的螢幕尺寸。
  • 使用 CSS 來微調內容的精確位置。

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

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