我想让标志在导航栏的左侧居中和链接,当它们在小型设备中折叠时,切换按钮应该出现在左侧,这里出现在右侧并且标志应该固定(没有折叠)
<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>
最佳答案
Bootstrap 4 Navbar 使用 flexbox,因此无需额外的 CSS 即可实现。您将需要一个空白的 spacer div 来使 Logo 居中。
<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>
左切换开关,品牌中心:
https://www.codeply.com/go/VfuMAtIoXi
相关:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items
关于twitter-bootstrap - Bootstrap 4 Navbar 在左侧对齐 Logo 中心和切换图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50911189/