我需要一些有关引导导航栏的帮助（Bootstrap v4.0.0-beta.3）。
我必须更改什么才能使按钮文本是单行而不是彼此之间。当该行已满时，其他按钮应从下一行的左侧开始。
目前我使用这段代码：
<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
<div class="container">
<div class="row w-100 no-gutters d-lg-block d-flex flex-wrap justify-content-between">
<a class="navbar-brand col-lg-3 col-7 py-lg-3 order-lg-1 order-2 float-left d-block" href="#">
Project Name
</a>
<div class="navbar-text col-lg-6 col-12 order-lg-2 order-1 text-right float-right align-self-end">Fix Nav Info</div>
<button class="navbar-toggler collapsed float-right order-3" type="button" data-toggle="collapse" data-target="#all-pages-176" aria-controls="all-pages-176" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="all-pages-176" class="navbar-collapse collapse float-right col-lg-12 order-4" style="height: auto;">
<ul id="menu-all-pages" class="navbar-nav ml-auto">
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
</ul>
</div>
</div>
</div>
</nav>
样式表：
@media (min-width: 992px) {
.nav-item {
float: left;
font-size: 13px;
margin: 3px;
padding: 0px;
border: 1px solid #605555;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
}
结果：
应该如此
要达到您想要的效果，您只需添加d-lg-inline-block类到ul元素：
它将列表项从大（lg）断点开始转换为内联块元素，这使得它们按照您所描述的方式进行包装。
这是完整的工作代码片段：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
@media (min-width: 992px) {
.nav-item {
font-size: 13px;
margin: 3px;
padding: 0px;
border: 1px solid #605555;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
line-height: 8px;
}
}
</style>
<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
<div class="container">
<div class="row w-100 no-gutters d-lg-block d-flex flex-wrap justify-content-between">
<a class="navbar-brand col-lg-3 col-7 py-lg-3 order-lg-1 order-2 float-left d-block" href="#">
Project Name
</a>
<div class="navbar-text col-lg-6 col-12 order-lg-2 order-1 text-right float-right align-self-end">Fix Nav Info</div>
<button class="navbar-toggler collapsed float-right order-3" type="button" data-toggle="collapse" data-target="#all-pages-176" aria-controls="all-pages-176" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="all-pages-176" class="navbar-collapse collapse float-right col-lg-12 order-4" style="height: auto;">
<ul id="menu-all-pages" class="navbar-nav d-lg-inline-block ml-auto">
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
<li class="nav-item float-left"><a class="nav-link" href="link.php/">Link Text Here</a></li>
</ul>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
