問題:在使用Bootstrap 4時，justify-content-end類在navbar中不能正常工作。

例子:我正試圖開始使用css，因為我花了很多時間編寫自定義CSS。也就是說，我開始嘗試在不編寫任何自定義CSS的情況下體驗它。我試圖構建一個導航欄，并從引導文檔中復制了以下代碼:

<nav class="navbar navbar-expand-lg navbar-light bg-light col-12">
    <ul class="nav justify-content-end">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</nav>

您會注意到justify-content-end類被添加到了navbar中。當檢查devtools時，我也看到了該類應用的樣式，所以我知道它們正在被應用。然而，導航鏈接列表仍然在左邊，就像這樣。

然而，在文檔中，相同的代碼看起來像這樣。

我錯過了什么嗎？

該類需要應用于父類，即& ltnav & gt

編輯:因為nav中有更多的內容，所以justify-content-end類不能像預期的那樣工作。你需要使用ml-auto

<link  rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-light bg-light col-12">
    <h1>H1 tag</h1>
    <ul class="nav ml-auto">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</nav>

假設您試圖將nav對齊到navbar的右端，它將是:

<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</nav>

https://codeply.com/p/u2Xl8bTym0

為. navbar添加自定義css。導航欄{寬度:100%；}.刪除justify-content-end并添加ml-auto。

Bootstrap 4 navbar標記會喜歡這個。

<div class="container-fluid main-menu">
    <div class="row">
        <div class="container">
            <div class="row">
                <nav class="navbar navbar-expand-lg">
                    <a class="navbar-brand" href="javascript:void(0);">
                        Logo
                    </a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="javascript:void(0);">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">About</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">Our Product</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:void(0);">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

這是筆。

justify-content-end類需要應用于& ltnav & gt

<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end">
    <ul class="nav ">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</nav>

<div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                    <div className="navbar-nav ml-auto">
                        <a className="nav-link" aria-current="page" href="#">
                            Home
                        </a>

                        <a className="nav-link" href="#">
                            Link
                        </a>
                    </div>
                </div>

試試這個:

<nav class="navbar navbar-expand-lg navbar-light bg-light col-12">
        <div class="col-4">

        </div>
        <div class="col-4">

        </div>
        <div class="col-4">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
    </nav>