Question

我希望将我折叠的导航栏显示在2列中。我使用引导程序4。

全尺寸导航栏如下所示：

http://prntscr.com/kymuzq

折叠后的导航栏是这样的：

http://prntscr.com/kymtun

任何人都知道一种简单的方法来制作具有2列的折叠导航栏，以便显示每个列表项吗？因此，左侧5个，右侧5个。

非常感谢您的帮助。

Answer 1

Nav使用flex，因此您可以使用它将菜单元素显示为flex元素。

将.navbar.nav类的元素添加以下类：

.flex-row

元素在行中而不在列中

.flex-wrap

nav元素包装子元素

此外，您还必须在每个.nav项目上使用col-6，因此它将分为两列。

<ul class="navbar-nav mr-auto flex-wrap flex-row">
        <li class="nav-item active col-6">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item col-6">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item col-6">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
</ul>

然后您应该对不同的断点使用正确的标记

Bootstrap 4折叠的导航栏（具有2列）

1 个答案: