如何使用 CSS 將 Bootstrap 3 中的導覽列內容置中？

CSS 居中導覽列內容

難以在 Bootstrap 的導覽列中居中內容？不要放棄！讓我們使用提供的 HTML 和 CSS 程式碼片段進行故障排除。

問題：

使用 Bootstrap 3，但現有方法無法在導覽列中居中對齊內容。

HTML程式碼：

提供參考（但不包含在此）。

修訂的CSS：

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

說明：

• 刪除浮動：從.nav -nav 左側將內部導覽置中。
• 設定顯示：內聯塊以保持水平對齊。
• 調整垂直對齊：頂部以正確對齊。
• 包含 .navbar .navbar-collapse來對齊摺疊的內部內容

改進的程式碼片段：

<div class="navbar navbar-default" role="navigation">
  <!-- ... -->

  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!-- ... -->
    </ul>
  </div>

  <!-- ... -->
</div>

響應式調整：

響應式調整：將居中效果限制為未折疊的導覽列，新增此媒體查詢：

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }
}

現在，您的導覽列內容將在折疊和未折疊狀態下輕鬆居中。

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