Bootstrap 4 如何使用Bootstrap 4创建导航栏，其中只有某些部分被折叠，某些部分仍然显示在中小型屏幕上？ 问题

通过将

数据目标

和

id

放在特定的

div

元素中，确实可以工作，但在中小屏幕中展开切换按钮时，导航栏中看到的其余部分也会随着汉堡按钮一起下降

疲倦的 我将

navbar切换器

放在所有

nav链接的末尾

，但在展开

navbar切换器

时，看到的部分的其余部分和汉堡包按钮仍会下降

预期产量

navbar toggler

应该展开，但看到的其余部分和hamburger按钮必须位于导航栏的顶部

代码位于下方

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">DASA</a>
    <div class="collapse navbar-collapse text-right" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Men <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Women</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Kids</a>
            </li>
        </ul>
    </div>
    <a class="nav-link" href="#"><i class="fas fa-search"></i></a>
    <a class="nav-link" href="#"><i class="fas fa-user"></i></a>
    <a class="nav-link" href="#"><i class="fas fa-shopping-bag"></i></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>
</nav>

代码在这里。

---

谢谢。

使用Bootstrap 4

order

classes命令移动菜单最后

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a class="navbar-brand order-0" href="#">DASA</a>
    <div class="collapse navbar-collapse text-right order-lg-0 order-last" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Men <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Women</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Kids</a>
            </li>
        </ul>
    </div>
    <a class="nav-link" href="#"><i class="fas fa-search"></i></a>
    <a class="nav-link" href="#"><i class="fas fa-user"></i></a>
    <a class="nav-link" href="#"><i class="fas fa-shopping-bag"></i></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>
</nav>

---

使用引导程序4

order

类来最后订购移动菜单

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a class="navbar-brand order-0" href="#">DASA</a>
    <div class="collapse navbar-collapse text-right order-lg-0 order-last" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Men <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Women</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Kids</a>
            </li>
        </ul>
    </div>
    <a class="nav-link" href="#"><i class="fas fa-search"></i></a>
    <a class="nav-link" href="#"><i class="fas fa-user"></i></a>
    <a class="nav-link" href="#"><i class="fas fa-shopping-bag"></i></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>
</nav>

---

谢谢你的回答我明白汉堡之前会发生什么，它会让事情扩大。最后，

order class

在一个中、小屏幕上显示了

div

元素。谢谢你的回答我理解汉堡之前的内容，它扩展了这一点。而且，

order class

最终在一个中小型屏幕上显示了

div

元素。我对它一无所知，从现在起我将使用bootstrap 4.5.0版本。我对它一无所知，从现在起我将使用bootstrap 4.5.0版本。