如何在 Bootstrap 導覽列中居中放置導覽項目？

在 Bootstrap 中居中導航項目：綜合指南

導航網頁需要輕鬆直觀地訪問導航元素。導航項目的正確對齊對於使用者體驗和視覺吸引力至關重要。 Bootstrap是一個受歡迎的前端框架，提供了導航項目居中的解決方案。

問題：

使用Bootstrap 4時遇到的常見問題是導覽的對齊導覽列中的項目（「nav-items」）。預設情況下，這些項目左對齊。用戶可能希望將它們居中。在不影響導覽列功能和回應能力的情況下調整對齊方式是一項挑戰，需要特定的解決方案。

解決方案：

Bootstrap 4 提供了多種用於對齊導航項目的選項，包括 mr-auto 和 ml-auto 實用程式類別。雖然這些類別提供一定程度的居中，但在某些情況下它們可能不會導致精確對齊。為了精確居中，建議結合使用 Flexbox 和邊距實用程式。

Bootstrap 4 Alpha 6:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <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">
<p><strong>Bootstrap 4.1:</strong></p>
<pre class="brush:php;toolbar:false"><nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">Bootstrap 4.1:<p></p>Bootstrap 4.1:</div></nav>