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

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

問題：

示例代碼：

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

答案：

方法：

要讓內容居中，修改CSS .navbar .navbar-nav 和。刪除預設的float: left 屬性。 navbar .navbar-nav，允許專案對齊並排。

設定顯示：inline-block；使導航項目內聯元素，保持適當的間距。

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

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

使用 text-align: center; 將文字放在導覽列中居中；on .navbar .navbar-collapse。

附加說明：

• 如果您只想在較大的螢幕上實現這種居中效果，請將CSS 包圍在媒體查詢，針對適當的螢幕尺寸。
• 使用 CSS 來微調內容的精確位置。

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