如何在響應式引導導覽列中完美居中內容？

如何在響應式Bootstrap 導覽列中居中內容

在Bootstrap 導覽列中居中內容可能是一項令人沮喪的任務，尤其是在通常建議的情況下解決方案失敗。本文將提供一種簡單有效的方法來解決此問題。

導覽列的 HTML 結構看起來是標準的。然而，CSS 樣式略有偏差。預設情況下，Bootstrap 將導覽列內容向左對齊。要將其居中，請按照以下步驟操作：

1. 從 .navbar 中刪除 float: left .navbar-nav：此修改從內部導覽中刪除左對齊。
2. 設定 .navbar .navbar-nav 顯示： inline-block：這會將導覽連結轉換為內聯元素。
3. 將文字置於 .navbar 中 .navbar-collapse：此步驟在導覽折疊時將內容置中。

這是更新的CSS：

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

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

此解決方案應使所有螢幕尺寸的內容居中。但是，如果您僅在導覽列未折疊時想要此效果，則可以使用媒體查詢：

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

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

這將僅在螢幕寬度大於或等於 768px 時套用居中效果。根據您的設計需求調整斷點。

以上是如何在響應式引導導覽列中完美居中內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！