Bootstrap 4 引导4：拆分导航栏并在两个导航栏切换器中显示，用于小屏幕设备

我已经使用Bootstrap4创建了一个导航栏。此导航栏有10个“导航项目”。对于大屏幕，它是在线显示的，对于小屏幕，我使用了“导航栏切换器”。这个很好用。但我想拆分这个导航栏，并在2个导航栏切换器中显示小屏幕

可能吗？而且我是新的引导

代码如下：

<nav class="navbar navbar-expand-md my-navbar">
<!-- Brand -->
<a class="navbar-brand"></a>    
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
</button>   
<!--Navbar Links -->
<div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
    <ul class="navbar-nav">

        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link A</a>
        </li>
        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link B</a>
        </li>
    </ul>
</div>
</nav>

对于小型设备， 我希望链接1和链接2折叠在toggler-1下

---

链接A和链接B将被折叠，切换到-2，这可能是你的想法吗

---

我们现在有两个可折叠导航条

#collapsibleNavbar1

和

#collapsibleNavbar2

，每个导航条都有两个开关驱动。我发现第一个拨号按钮在菜单栏中间结束，但这可能是可手写的。请允许我建议您编辑您的帖子，从解释问题开始，然后是您已经尝试解决的所有问题，并以您的期望作为结论。让每个问题都集中在一个问题上，并提供尽可能多的信息，以吸引知识渊博的用户使用你的答案。@nickl我已经用代码更新了帖子。使用此代码，导航栏将折叠为小屏幕的单切换图标。我希望显示为切换器，切换器1下为Link-1和Link-2，切换器下为Link-A和Link-B-2@nickel谢谢这个解决方案对我有效。但对于大屏幕，它显示为2个不同的菜单与中间的差距。是的，这可以用一些CSS技巧来设计。谢谢你的解决方案