How i can make navbar like this in bootstrap 4.3.1

2019-08-20 07:58发布

问题:

hello
can you help me to make a navbar like this in desktop and laptop versions:

My code:

<div class="container" style="color:black">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Left</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">Any</a>
                </li>
            </ul>
        </div>
        <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">brand </a>
        </div>
        <div class="navbar-collapse w-100 order-3 dual-collapse2 collapse" id="navbarToggleExternalContent" style="">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Right</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
        <button id="btn2" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>
</div>

My project:
https://jsfiddle.net/bexiqydic/9vn80bku/3/