如何在 Bootstrap 4 中居中導航專案？

在Bootstrap 中居中導航項目

在Bootstrap 4 中，可以使用Flexbox 和邊距實用程式來對齊導航項目（連結項目）。

Bootstrap 4 Alpha 6 和稍後

在Bootstrap 4 alpha 6 及更高版本中將品牌和連結居中：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="d-md-flex d-block flex-row mx-md-auto mx-0">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse mr-auto">

在此程式碼中，使用d-md-flex 和d-block類別在中型及以上螢幕中水平對齊品牌和連結。 flex-row 類別確保項目並排排列。 mx-md-auto 和 mx-0 類別將項目置於可用空間中，並根據品牌影像的寬度進行調整。

Bootstrap 4.1

對於Bootstrap 4.1:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">

在這種情況下，mx-auto 直接應用於nav連結居中。品牌可以使用其他科技居中，例如 justify-content-center。

在視口中精確定位連結

要將連結在視口中精確定位連結

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-nav">

要將連結在視口中精確地居中，請考慮此技術：

這裡，navbar -nav 被賦予固定的寬度，並且justify-content: center 將連結精確地對齊在螢幕中心。 有關進一步的自訂和其他範例，請參閱下面參考部分中提供的連結。

以上是如何在 Bootstrap 4 中居中導航專案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！