在 Bootstrap 4 中对齐导航栏
Posted
技术标签:
【中文标题】在 Bootstrap 4 中对齐导航栏【英文标题】：Justifying a navbar in Bootstrap 4 【发布时间】：2018-02-03 10:14:32 【问题描述】：我有一个导航栏，我使用了split button dropdowns 和常规nav-items，没有下拉菜单。
我有一些工作，但我试图让导航元素填充浏览器窗口。我已经看到了对可以执行此操作的“工厂”Bootstrap 类的引用，但我无法使其正常工作。
我有两个问题：
在 Bootstrap 4 中执行此操作的“工厂”方法是什么？
为什么按钮元素间距不一致？
body
padding-top: 70px
.vcenter
display: inline-block;
vertical-align: middle;
float: none;
/* CSS menu */
.navbar, .navbar.btn-secondary
/* For browsers that do not support gradients */
background-color: #b32017;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(#b32017, #801710);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(#b32017, #801710);
/* For Firefox 3.6 to 15 */
background: -moz-linear-gradient(#b32017, #801710);
/* Standard syntax */
background: linear-gradient(#b32017, #801710);
.navbar .btn-secondary
/*background-color: #b32017;*/
/* For browsers that do not support gradients */
background-color: #b32017;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(#b32017, #801710);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(#b32017, #801710);
/* For Firefox 3.6 to 15 */
background: -moz-linear-gradient(#b32017, #801710);
/* Standard syntax */
background: linear-gradient(#b32017, #801710);
.navbar img
max-height: 40px;
.navbar .btn
/* Removes Bootstrap's border */
border: 0px;
.navbar .navbar-brand
color: #ffffff;
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus
color: #c1c1c1;
.navbar .navbar-text
color: #ffffff;
.navbar .navbar-nav .nav-link
color: #ffffff;
border-radius: .25rem;
margin: 0 0.25em;
.navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus
color: #c1c1c1;
.navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus
color: #c1c1c1;
background-color: #801710;
.navbar .navbar-toggle
border-color: #801710;
.navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus
background-color: #801710;
.navbar .navbar-toggle .navbar-toggler-icon
color: #ffffff;
.navbar .navbar-collapse, .navbar .navbar-form
border-color: #ffffff;
.navbar .navbar-link
color: #ffffff;
.navbar .navbar-link:hover
color: #c1c1c1;
@media (max-width: 767px)
.navbar .navbar-nav .open .dropdown-menu .dropdown-item .dropdown-menu.show
/* no gradient support */
/* #cccccc */
color: #ffffff;
/* For browsers that do not support gradients */
background-color: #ffffff;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(#ffffff, #cccccc);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(#ffffff, #cccccc);
/* For Firefox 3.6 to 15 */
background: -moz-linear-gradient(#ffffff, #cccccc);
/* Standard syntax */
background: linear-gradient(#ffffff, #cccccc);
.navbar .navbar-nav .open .dropdown-menu .dropdown-item:hover, .navbar .navbar-nav .open .dropdown-menu .dropdown-item:focus
color: #c1c1c1;
.navbar .navbar-nav .open .dropdown-menu .dropdown-item.active
color: #c1c1c1;
background-color: #801710;
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Experimental Test Page</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-sm bg-faded navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Brand -->
<a class="navbar-brand" href="#">
</a>
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav btn-group">
<!-- Home -->
<li class="nav-item">
<div class="btn-group">
<a href="#" class="btn btn-secondary" role="button"><i class="fa fa-fw fa-home"><!-- --></i> Home</a>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><i class="fa fa-fw fa-map-marker"><!-- --></i>Hours & Location</a>
</div>
</div>
</li>
<li class="nav-item">
<div class="btn-group" role="button">
<a href="#" class="btn btn-secondary" role="button">Section</a>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
<a class="dropdown-item" href="#">Item 4</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link btn btn-secondary" href="#" role="button">Another Section</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
</li>
<li class="nav-item">
<div class="btn-group" role="button">
<a href="#" class="btn btn-secondary" role="button">Products</a>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
</body>
</html>【问题讨论】：
【参考方案1】：您可以使用nav-justified，确保使用w-100 的navbar-nav 是全宽...
<ul class="navbar-nav w-100 nav-justified">
<li class="nav-item">..<li>
<li class="nav-item">..<li>
</ul>
https://codeply.com/go/od0TnGfQv2
【讨论】：
感谢您的及时回复！您会推荐什么作为让拆分按钮组像独立链接一样更改hover 上的文本颜色的正确方法？
知道了！在按钮上添加nav-link 作为类，使它们的行为与独立链接一样。
nav-fill 在某些情况下可能是nav-justified 的更好替代品，因为每个项目的宽度都会适应内容【参考方案2】：
我遇到了同样的问题，但有徽标。
我刚刚添加了nav-justified 和w-100 类以及navbar-nav 类。
这里是导航栏的截图。
这里是代码：
<nav class="navbar navbar-toggleable-md navbar-light bg-faded px-5">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/logo.png" class="img-fluid" >
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav nav-justified w-100">
<li class="nav-item active">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Mission & Vission</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Brands
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Alo maids</a>
<a class="dropdown-item" href="#">Alo Technical</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Brands</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Brands</a>
</li>
</ul>
</div>
</nav>
【讨论】：
【参考方案3】：添加类 w-100 @ navbar
并添加类 nav-fill w-100 @ navbar-nav
<nav class="navbar navbar-expand-lg navbar-light w-100">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nvb1" aria-controls="nvb1" aria-expanded="false" aria-label="Menu switcher">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nvb1">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active"><a href=" url('/') " class="nav-link">Home</a></li>
<li class="nav-item"><a href=" url('') " class="nav-link">Links</a></li>
<li class="nav-item"><a href=" url('') " class="nav-link">Links</a></li>
</ul>
</div>
</nav>
https://jsfiddle.net/Cotiga/84kc3rqL/
【讨论】：
【参考方案4】：对于Bootstrap4，这会更好
<ul class="navbar nav nav-justified">
<li class="nav-item">Match Found</li>
<li class="nav-item">Shortlist</li>
</ul>
【讨论】：
以上是关于在 Bootstrap 4 中对齐导航栏的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4将两个导航栏菜单按钮对齐到右侧[重复]
将导航栏搜索表单和中心的按钮与 Bootstrap 4 对齐