如何在響應式Bootstrap 導覽列中居中內容
在Bootstrap 導覽列中居中內容可能是一項令人沮喪的任務，尤其是在通常建議的情況下解決方案失敗。本文將提供一種簡單有效的方法來解決此問題。
導覽列的 HTML 結構看起來是標準的。然而，CSS 樣式略有偏差。預設情況下，Bootstrap 將導覽列內容向左對齊。要將其居中，請按照以下步驟操作：
-
從 .navbar 中刪除 float: left .navbar-nav：此修改從內部導覽中刪除左對齊。
-
設定 .navbar .navbar-nav 顯示： inline-block：這會將導覽連結轉換為內聯元素。
-
將文字置於 .navbar 中 .navbar-collapse：此步驟在導覽折疊時將內容置中。
這是更新的CSS：
1 2 3 4 5 6 7 8 9 | .navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
|
登入後複製
此解決方案應使所有螢幕尺寸的內容居中。但是，如果您僅在導覽列未折疊時想要此效果，則可以使用媒體查詢：
1 2 3 4 5 6 7 8 9 10 11 | @media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
|
登入後複製
這將僅在螢幕寬度大於或等於 768px 時套用居中效果。根據您的設計需求調整斷點。
以上是如何在響應式引導導覽列中完美居中內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
