【问题标题】：Bizzare placement of list items on navbar - BOOTSTRAP 4导航栏上列表项的奇怪放置 - BOOTSTRAP 4
【发布时间】：2018-09-26 00:53:17
【问题描述】：
我正在尝试使用 BOOTSTRAP 4 navbar，我在网页上看到以下输出。
我真正想要的是以下内容：
我正在使用以下代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="\">
<h5 class="text-white">
<i class="fab fa-expeditedssl"></i>   CVT</h4>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="\">HOME
<i class="fas fa-home"></i>
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="\search">SEARCH
<i class="fas fa-search"></i>
</a>
</li>
</ul>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
我尝试使用list-inline 类来内联列表项，但没有任何效果。你能帮忙吗？谢谢。
【问题讨论】：
标签：
html
twitter-bootstrap
css
flexbox
bootstrap-4
【解决方案1】：
存在一些问题，因为导航栏的结构不像典型的 Bootstrap 4 导航栏...
-
使用flex-row 强制导航栏导航在所有宽度上保持水平
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="\">
<h5 class="text-white">
<i class="fab fa-expeditedssl"></i> CVT</h5>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto flex-row">
<li class="nav-item active">
<a class="nav-link px-2" href="\">HOME
<i class="fas fa-home"></i>
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" href="\search">SEARCH
<i class="fas fa-search"></i>
</a>
</li>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
https://www.codeply.com/go/zED6d4TC8B
【解决方案2】：
在您的<nav> 标记中应该有一个navbar-expand 属性，例如navbar-expand-md。
来自docs：
导航栏需要用.navbar-expand{-sm|-md|-lg|-xl} 包裹.navbar 以实现响应式折叠和配色方案类。
【解决方案3】：
这些ul 元素中的flex-direction 是column，因此将第二个ul 设置为row 以使其项目彼此相邻显示：
ul.ml-auto {
flex-direction: row;
}
ul.ml-auto li {
margin-left: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="\">
<h5 class="text-white">
<i class="fab fa-expeditedssl"></i>   CVT</h4>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="\">HOME
<i class="fas fa-home"></i>
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="\search">SEARCH
<i class="fas fa-search"></i>
</a>
</li>
</ul>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>