![导航栏对齐徽标中心并在左侧切换图标]( "导航栏对齐徽标中心并在左侧切换图标")
本文介绍了Bootstrap 4 导航栏对齐徽标中心并在左侧切换图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想让标志居中，链接在导航栏中的左侧，当它们在小设备中折叠时，切换按钮应该出现在左侧，这里出现在右侧并且标志应该是固定的(没有崩溃)
<a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页</a><li class="nav-item"><a class="nav-link" href="#">功能</a><li class="nav-item"><a class="nav-link" href="#">定价</a><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>
</nav>
解决方案
Bootstrap 4 Navbar 使用 flexbox，因此可以无需额外的 CSS 来实现这一点.您将需要一个空的间隔 div 来保持徽标居中.
<div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页</a><li class="nav-item"><a class="nav-link" href="#">功能</a><li class="nav-item"><a class="nav-link" href="#">定价</a><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>
<div class="d-flex w-100 order-0"><div class="w-100"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span>
<a class="navbar-brand text-center w-100" href="#">Navbar</a><span class="w-100"></span>
<span class="w-100"></span></nav>
Toggler 左侧，品牌中心:
https://www.codeply.com/go/VfuMAtIoXi
相关:
如何在 Bootstrap 中居中导航项目?
带有左对齐、居中或右对齐项目的 Bootstrap NavBar
i want to make the logo centered and links on the left side in the navbar and when they collapse in small devices the toggle button should appear in the left side,here appears on the right side and the logo should be fixed(no collapse)
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
解决方案
The Bootstrap 4 Navbar uses flexbox, so it's possible to achieve this without extra CSS. You will need an empty spacer div to keep the logo centered.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="d-flex w-100 order-0">
<div class="w-100">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<a class="navbar-brand text-center w-100" href="#">Navbar</a>
<span class="w-100"></span>
</div>
<span class="w-100"></span>
</nav>
Toggler left, brand center:
https://www.codeply.com/go/VfuMAtIoXi
Related:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items
这篇关于Bootstrap 4 导航栏对齐徽标中心并在左侧切换图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！