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

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

Susan Sarandon

發布： 2024-12-14 08:14:10

原創

887 人瀏覽過

How Do I Center Elements in a Bootstrap Navbar?

將 Bootstrap 導覽列中的元素居中

嘗試將 Bootstrap 導覽列中的元素居中時，這似乎具有挑戰性。但是，透過正確的技術，這是可以實現的。

Bootstrap 4 及更高版本

Bootstrap 4 及更高版本使用 Flexbox，這簡化了對齊過程。若要將元素（例如「網站名稱」）置中，請將「mx-auto」類別加入包含該元素的「nav.navbar-nav」中。這會將其相對於左右「nav.navbar-nav」元素居中。

例如：

<nav class="navbar 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>

登入後複製

以前的 Bootstrap 版本

對於 Bootstrap 4 之前的版本，需要使用 Flexbox巢狀或position:absolute居中

其他選項

如果導覽列只包含一個“nav.navbar-nav”，您可以使用“justify-content-center 」將其居中內容。

絕對居中

要實現絕對居中，可以使用position:absolute方法或flexbox嵌套。

絕對位置

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

登入後複製

Flexbox 嵌套

另一個Flexbox 容器中嵌套中居中的項目，應用了“justify-content-center”和“flex-fill”。

<ul class="nav navbar-nav flex-fill">
  <li class="nav-item">
    <ul class="nav navbar-nav justify-content-center">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
  </li>
</ul>

登入後複製

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