如何在一行中显示多个列表链接以在Bootstrap 4中切换导航？

Question

Current:

1）单击“更多”按钮

2）导航栏延伸到底部（品牌标识也延伸）

2-1）出现三个链接（FAQ / MAP / FAX），显示3个不同的链接，每个链接占用全宽度空间

Desired Format:

1）点击“更多按钮”

2）导航栏延伸到底部，品牌标识不会延伸

2-1）出现三个链接（FAQ / MAP / FAX），每个链接显示在One Line中

Codeply：http://codeply.com/go/ShOVPZbUaT

Answer 1

为了防止品牌标志延伸（或更正确地将其对齐到顶部并覆盖默认的垂直居中对齐设置），您可以将align-items-start类添加到navbar，如下所示：

<nav class="navbar navbar-expand-md navbar-dark bg-dark align-items-start">

要让.collapse标记链接在同一垂直线上，您可以使用flex div标记环绕三个链接。像这样：

<div class="collapse" id="more">
    <div class="d-flex">
        <a href="#" class="nav-link text-white">FAQ</a>
        <a href="#" class="nav-link text-white">MAP</a>
        <a href="#" class="nav-link text-white">FAX</a>
    </div>
</div>

d-flex和align-items-start都是Bootstrap类。

这是一个codepen与这些编辑。

希望有所帮助。