Question

电流：

1）点击“更多”＆＃39;按钮

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

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

所需格式：

1）点击“更多按钮”按钮＆＃39;

2）导航栏延伸到底部品牌标识不扩展

2-1）出现三个链接（FAQ / MAP / FAX）每个链接都显示在一行

中

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的编辑内容。

希望有所帮助。

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

电流：

所需格式：

1 个答案: