Boostrap 4导航栏多行

Question

我希望在所附图像中实现布局。刚开始使用BS4并开始使用flexbox。

我尝试了几种不同的方法，包括伸缩行。

这是我能想到的最好的方法，但是我不确定这是实现此标记或最简洁的标记的最佳方法。

搜索框应沿导航栏上方的长度移动，并在我添加或删除更多链接时扩展

<nav id="main-nav-top" class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse flex-column" id="navbar">
        <ul class="navbar-nav nav w-100">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-light" href="#">Link one</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-light" href="#">Link two</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-light" href="#">Link three</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-light" href="#">Link four</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-light" href="#">Link Five</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-light" href="#">Link Six</a>
            </li>
            <a class="navbar-brand ml-auto" href="#"><img src="../Img/logo.png" class="d-inline-block align-top" alt="Logo"></a>
        </ul>
        <div class="navbar-nav nav w-100">
            <form class="form-inline mr-auto">
                <input class="form-control search" type="text" id="search-bar" placeholder="Course Search" autocomplete="off" spellcheck="false" autocorrect="off">
            </form>
            <button type="button" class="btn btn-danger">Apply Button</button>
        </div>
    </div>
</nav>