1）点击“更多”按钮
2）导航栏延伸到底部，（品牌徽标也延伸）
2-1）出现三个链接（FAQ / MAP / FAX），其中显示3个不同的链接，每个链接占用全角空间
1）点击“更多按钮”
2）导航栏扩展到底部，品牌徽标不会扩展
2-1）出现三个链接（FAQ / MAP / FAX），每个链接显示在一行中
Codeply：http：//codeply.com/go/ShOVPZbUaT
为了防止品牌徽标扩展（或更正确地将其顶部对齐并默认覆盖垂直居中的对齐设置），您可以按如下方式添加align-items-start该类navbar：
<nav class="navbar navbar-expand-md navbar-dark bg-dark align-items-start">
为了使.collapse标签链接位于同一垂直线上，可以用flexdiv标签将三个链接包围起来。像这样：
<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是自举类。
这是带有这些编辑的Codepen。
希望能有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句