如何將 Bootstrap 導覽列中的元素置中？

在 Bootstrap 導覽列中居中元素

由於元件的靈活排列方式，在 Bootstrap 導覽列中居中元素可能具有挑戰性。不過，這裡有一些有效的方法可以實現這一點：

Bootstrap 5 (2021)

導覽列仍然採用 Flexbox，因此對齊原則與 Bootstrap 4 類似。 「網站名稱」可以使用 mx-auto 居中。左右側菜單不再需要浮動。

範例程式碼：

<nav></nav>

Bootstrap 4.1

導覽列現在利用了Flexbox，可以使用了Flexbox mx-auto。左右側選單不再需要使用浮動。

範例程式碼：

<nav></nav>

Bootstrap 4 Beta

如果導覽列只有一個導覽列-nav也可以使用

justify-content-center 來對齊內容。

導覽列以絕對位置居中

您可以使用絕對位置來定位要居中的元素:

.abs-center-x { position: absolute; left: 50%; transform: translateX(-50%); }

使用 Flexbox讓導覽列居中嵌套

另一個選項是使用flexbox將項目居中：

注意：上述解決方案將「網站名稱」相對於左側居中和右側導覽列。新增 flex-fill 類別可確保每個部分填充導覽列的寬度，從而防止相鄰部分寬度不同時出現錯位。

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