javascript - 如何在 Bootstrap4 中为切换导航在一行中显示多个列表链接？

Question

当前:

1) 点击“更多”按钮

2) 导航栏延伸到底部，(品牌标志也延伸)

2-1) 出现三个链接 (FAQ/MAP/FAX) 显示 3 个不同的链接，每个都占用全 Angular 空间

所需格式:

1) 点击“更多按钮”

2) 导航栏延伸到底部品牌标志不延伸

2-1)出现三个链接(FAQ/MAP/FAX)每个链接显示在一行

代码回复: http://codeply.com/go/ShOVPZbUaT

Answer 1

为了防止品牌标志延伸(或更正确地将其对齐到顶部并覆盖默认设置的垂直居中对齐方式)，您可以将 align-items-start 类添加到您的导航栏 像这样:

<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进行这些编辑。

希望对您有所帮助。