导航栏中的 Bootstrap 双行 [英] Bootstrap double row in navbar

问题描述

我已经更改了 BootStrap 中标准 fixed nabar header 的代码(CSS 中没有变化)以实现获取徽标下方的菜单项，例如

但是当使用我得到的代码时

有什么建议吗?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="样式表"/><nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"><div class="容器"><div class="row"><ul class="collapse navbar-collapse navbar-nav ml-auto"><li class="nav-item"><a class="nav-link" href="mailto:[e-mail]"><small><i class="fas fa-envelope"></i>斯图尔电子邮件</small></a><li class="nav-item"><a class="nav-link" href="tel:[phone]"><small><i class="fas fa-phone-volume"></i>[phone]</small></a><a class="navbar-brand" href="index.php"><img class="img-fluid" src="img/logo.png" width="400" alt="鹿特丹钢铁厂"></a><ul class="collapse navbar-collapse navbar-nav ml-auto"><li class="nav-item"><a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="60" alt="Metaalunie"></＞<li class="nav-item"><a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="60" alt="ISO 9001"></a＞<li class="nav-item"><a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="60" alt="CE NEN EN1090"><;/a＞<li class="nav-item"><a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="60" alt="Lloyds overstempelbevoegd"></a＞<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span>

<div class="row"><div class="collapse navbar-collapse" id="navbarResponsive"><ul class="navbar-nav ml-auto"><li class="nav-item"><a class="nav-link" href="index.php">首页</a><li class="nav-item"><a class="nav-link" href="about.php">通过 RSW</a><li class="nav-item"><a class="nav-link" href="certificering.php">Certificering</a><li class="nav-item"><a class="nav-link" href="#">Media</a><li class="nav-item"><a class="nav-link" href="contact.php">联系方式</a>

</nav>

解决方案

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="样式表"/><div class="row"><ul class="collapse navbar-collapse navbar-nav ml-auto"><li class="nav-item"><a class="nav-link" href="mailto:[e-mail]"><small><i class="fas fa-envelope"></i>斯图尔电子邮件</small></a><li class="nav-item"><a class="nav-link" href="tel:[phone]"><small><i class="fas fa-phone-volume"></i>[phone]</small></a><a class="navbar-brand" href="index.php"><img class="img-fluid" src="img/logo.png" width="400" alt="鹿特丹钢铁厂"></a><ul class="collapse navbar-collapse navbar-nav mr-auto"><li class="nav-item"><a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="60" alt="Metaalunie"></＞<li class="nav-item"><a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="60" alt="ISO 9001"></a＞<li class="nav-item"><a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="60" alt="CE NEN EN1090"><;/a＞<li class="nav-item"><a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="60" alt="Lloyds overstempelbevoegd"></a＞<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span>

<div class="row"><div class="collapse navbar-collapse" id="navbarResponsive"><ul class="navbar-nav mx-auto"><li class="nav-item"><a class="nav-link" href="index.php">首页</a><li class="nav-item"><a class="nav-link" href="about.php">通过 RSW</a><li class="nav-item"><a class="nav-link" href="certificering.php">Certificering</a><li class="nav-item"><a class="nav-link" href="#">Media</a><li class="nav-item"><a class="nav-link" href="contact.php">联系方式</a>