如何將 Bootstrap 導覽列中的元素置中？-css教學-PHP中文網

如何將 Bootstrap 導覽列中的元素置中？

Susan Sarandon

發布： 2024-12-14 01:49:09

原創

960 人瀏覽過

How do I center an element within a Bootstrap Navbar?

將Bootstrap 導覽列中的元素居中

問題： 儘管進行了各種嘗試，使用者仍無法將Bootstrap 中的元素居中導覽列。

答案：

Bootstrap 5 (2021)

導覽列使用 Flexbox，讓您可以使用 mx-auto 類別將元素置中。

<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Download</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
    </ul>
    <ul class="nav navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Rates</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

登入後複製

引導程式4.1

對於Bootstrap 4.1 及更高版本，使用mx-auto 而不是pull-left 和pull-right 來對齊左右選單：

<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Download</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
    </ul>
    <ul class="nav navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
    <ul class="nav navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Rates</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

登入後複製

其他居中選項

position:absolute;:設定元素居中位置為position:absolute;並使用變換：translateX(-50%);.
Flexbox嵌套：使居中的項目也顯示：flexbox和justify-content：center。

請記住，這些解決方案可能有缺點，例如無法將居中元素與不同的相鄰元素完美對齊

附加說明：

請務必將main-nav 替換為您想要的導覽列類別名稱。
如果您的導覽列有單一 navbar-nav，請使用 justify-content-center 將其居中。
到在桌面上將元素居中，但在行動裝置上將它們向左對齊，使用媒體查詢。
探索 [Bootstrap 文件](https://getbootstrap.com/docs/4.5/components/navbar/) 以取得更多關於導覽列的資訊客製化。

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