我想让徽标居中并在导航栏左侧链接,当它们在小设备中折叠时,切换按钮应出现在左侧,此处显示在右侧,徽标应固定(不折叠)
<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>
2 回答
Bootstrap 4 Navbar使用flexbox,因此可以实现这个 without extra CSS . 您需要一个空的spacer div来保持徽标居中 .
Toggler left, brand center:
https://www.codeply.com/go/VfuMAtIoXi
有关:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items
当然,对不起,我应该早点补充一下 . 所以基本上我们正在做的是将.navbar品牌移动到中间,给它设置0 auto参数,并调整.navbar-collapse(所以我们菜单的项目)到左边,从顶部给出10px空间导航 . 然后使用媒体查询,它将开始仅在767px工作,我们将.navbar品牌的cetralize,所以它将始终在中间,我们现在调整.navbar-toggler(菜单图标),因为我们做了更好的菜单项,现在正在获取默认位置,为它们提供以下样式:position:inherit;然后我还将navbar-expand-sm类修改为navbar-expand-md以更改断点