我想创建一个可折叠的 navbar
。一切正常,但是nav
项目没有像应该的那样垂直堆叠在一起,而是水平排列在一起。
代码:
<nav class="navbar navbar-light bg-faded" role="navigation">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsing-navbar">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="collapsing-navbar">
<a class="navbar-brand" href="/">Logo</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="/messages" class="nav-link">Messages</a>
</li>
<li class="nav-item">
<a href="/logout" class="nav-link">Logout</a>
</li>
</ul>
</div>
</nav>
截图:
.my-navbar-left .navbar-nav .nav-item { float: none; }
。 - max.navbar-right
),并在屏幕宽度大于34em
时应用该类样式(float: right
),而不是使用pull-right
。.pull-right
类的问题是它具有!important
规则。我认为这是目前最好的解决方案。我认为人们现在不应该使用Bootstrap 4进行开发(学习-为什么不呢)。如果您基于Bootstrap 4创建网站,则可能会在最终版本发布时遇到问题。 - max