有没有办法使用 Bootstrap 4 实现以下结果（第二行居中的菜单项）：
这是用 Bootstrap 3 制作的，但我无法让它与 Bootstrap 4 一起使用（右侧导航栏（升级、govel、...）不会浮动，而是在空间不足时添加滚动条）。
我的 Bootstrap 4 代码： https://www.bootply.com/awN10dN1Ns
如果没有足够的空间用于单行导航，任何提示如何使菜单项浮动到第二行，如上面的屏幕截图所示？如何使第二行的菜单项居中？
Bootstrap 3 示例的链接是：https://www.lotsearch.de/
【问题讨论】：
标签： html css twitter-bootstrap bootstrap-4 navbar
你可以改变这个：
@media (min-width: 768px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
}
通过这个：
@media (min-width: 768px) {
.navbar-expand-md {
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
}
这是你所期望的？
添加此项以订购您的导航：
@media (min-width: 768px) {
.navbar-expand-md .navbar-nav{
order:0
}
}
【讨论】：
将 2 行包装在单独的 d-flex div 中，并使用 w-100 使它们填充导航栏的宽度。在导航栏中使用flex-column 使2个div垂直堆叠。
<nav class="navbar navbar-expand-md navbar-light flex-column" id="header">
<div class="w-100 d-flex">
<a href="/" class="navbar-brand">
<img src="/images/favicons/favicon_144x144.png" class="favicon-logo" alt="Logo">
</a>
<ul class="navbar-nav navbar-expand px-3 order-last">
<li class="nav-item">
<a class="nav-link text-nowrap nav-small-link" href="" title="Vorgemerkte Gebote auf Ihrer Bietliste">
<div class="icon-wrapper">
<i class="fa fa-gavel fa-fw"></i>
<span class="badge badge-orange" id="bidlist-counter">0</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap nav-small-link" href="" title="Merkzettel">
<div class="icon-wrapper">
<i class="fa fa-bookmark fa-fw"></i>
<span class="badge badge-orange" id="bookmark-counter">14</span>
</div>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link text-nowrap dropdown-toggle" href="#" id="navbarDropdownLanguage" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="flag-icon flag-icon-de"></span>
</a>
<div class="dropdown-menu dropdown-langauge dropdown-menu-right" aria-labelledby="navbarDropdownLanguage">
<a class="dropdown-item text-nowrap" href="" hreflang="en">
<span class="flag-icon flag-icon-gb"></span> GB </a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-nowrap" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user fa-fw"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/user">
<i class="fa fa-user fa-fw"></i> Mein Account </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/bids/management/bidlist">
<i class="fa fa-user fa-fw"></i> Bietliste <span class="badge badge-orange" id="bidlist-counter">0</span>
</a>
<a class="dropdown-item" href="/bids/management/manual-bidlist">
<i class="fa fa-user fa-fw"></i> PDF-Gebote </a>
<a class="dropdown-item" href="/bids/management/placed-bidlist">
<i class="fa fa-user fa-fw"></i> Abgegebene Gebote </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/static/contact">
<i class="fa fa-envelope fa-fw"></i> Kontakt aufnehmen </a>
<a class="dropdown-item" href="/static/faq">
<i class="fa fa-graduation-cap fa-fw"></i> FAQ </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/user/logout">
<i class="fa fa-sign-out fa-fw"></i> Logout </a>
</div>
</li>
</ul>
<button class="navbar-toggler order-last" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav ml-auto">
<li>
<a class="nav-link text-nowrap orange" href="">
<i class="fa fa-arrow-circle-up"></i> Upgrade </a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 justify-content-md-center justify-content-start" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-nowrap" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-search"></i> Suche <span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/">
<i class="fa fa-lightbulb-o fa-fw"></i> Suche (Aktuelle Auktionen) </a>
<a class="dropdown-item" href="/archive">
<i class="fa fa-archive fa-fw"></i> Suche (Archiv) </a>
</div>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/auction-catalogues">
<i class="fa fa-book fa-fw"></i> Kataloge </a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/category"><i class="fa fa-list-alt fa-fw"></i> Kategorien </a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/alert"><i class="fa fa-bell fa-fw"></i> Suchaufträge </a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/artist"><i class="fa fa-bar-chart fa-fw"></i> Künstler / Analysen </a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/blog"><i class="fa fa-newspaper-o fa-fw"></i> Blog </a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/TyYjq0u7B0
注意：hidden-* 类在 Bootstrap 4 中不存在。
【讨论】：
请尝试下面的 css。
#navbarSupportedContent {
text-align: center;
display: block !important;
}
#navbarSupportedContent ul.navbar-nav {
display: block !important;
}
#navbarSupportedContent ul.navbar-nav li {
display: inline-block;
}
【讨论】：