如何在 Bootstrap 導覽列中完美地居中導覽項目？

在Bootstrap 中居中導航項目

挑戰

在Bootstrap 中，根據瀏覽器視窗大小在導航列中居中導航項目（連結）可以是一項棘手的任務。標準 Bootstrap 方法使用 mr-auto 和 ml-auto 類，根據瀏覽器視窗寬度減去標誌寬度有效地將導覽置中。為了實現完美居中，我們需要更精確的解決方案。

解決方案

響應式使用Flexbox 和Margin 實用程式

Bootstrap 4 提供了d- flex 和mx-auto 類，它們使我們能夠實現響應式居中。其實現方式如下：

<div class="d-md-flex d-block flex-row mx-md-auto mx-0">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse mr-auto">

在此程式碼中：

• .d-md-flex 類別使導航容器在中型螢幕（和更大）中靈活，並且將其顯示設為Flex。
• .d-block 類別針對較小的螢幕，並使導航容器成為
• .flex-row 類別水平排列導航容器的子元素。
• .mx-md-auto 類別在中型和更大螢幕中水平居中導航容器。
• .mx-0 類別會刪除較小螢幕中的水平邊距，以確保正確對齊。
• .mr-auto 類別右對齊折疊的導航項目。

此方法根據瀏覽器視窗大小響應式地將導覽項目居中，確保完美對齊。

附加說明

• 對於 Bootstrap 4.1 及以上版本，可以直接在.navbar-nav 元素可以達到相同的效果。
• 如果您希望導覽項目在視窗中精確居中，請考慮使用 CSS 網格方法。

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