如何將內容集中在響應式引導導覽列？

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

難以對齊 Bootstrap 導覽列中的內容？這是一個對許多用戶來說可靠的綜合解決方案。

了解問題

Bootstrap 的預設導覽列對齊可能會出現問題，特別是針對響應式佈局時。罪魁禍首通常是與內部導航關聯的 float: left 屬性。

解決方案

要使內容居中，您需要從內部導航並使其成為內聯區塊。此外，將 text-align 屬性設為居中將使內容水平對齊。

CSS 修改

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

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

範例

實作這些 CSS 變更將使內容集中在您的導覽列。

<!-- ...navbar code here -->

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

  .navbar .navbar-collapse {
    text-align: center;
  }
</style>

<!-- ...navbar code here -->

其他注意事項

要確保對齊變更僅發生在非折疊導覽列上，請考慮將 CSS 修改包含在適當的媒體查詢中。

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

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

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