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

將 Bootstrap 導覽列中的元素置中

難以將 Bootstrap 導覽列中的元素置中？儘管進行了各種嘗試，但要實現這個看似簡單的任務可能難以實現。本文將深入研究該問題並提供實用的解決方案。

了解導覽列居中

在 4.1 之前的 Bootstrap 版本中，導覽列中的元素居中依賴浮動和邊距，有效實施可能具有挑戰性。然而，隨著 Flexbox 的引入，事情變得更加簡單。

Bootstrap 4.1 以上版本的解答

Bootstrap 4.1 引進了 justify-content-center屬性，它提供了一種將元素居中的簡單而有效的方法導航列：

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Download</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
        </ul>
        <ul class="nav navbar-nav justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#">Rates</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>

絕對定位替代方案

如果絕對定位可以接受，它也可以用來將導覽列中的元素居中：

<div class="navbar-center-absolute">
    <!-- Centered element here -->
</div>

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

Flexbox嵌套替代方案

最後，另一個基於Flexbox 的方法是在導覽列中嵌套一個居中的項目：

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav flex-fill w-100 d-flex flex-nowrap">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Download</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item"><a class="nav-link" href="#">Rates</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>

這些解決方案提供了在Bootstrap導航列中居中元素的有效方法，使得您的網站導航更加人性化且更具視覺吸引力。

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