Bootstrap 4 Alpha 6 navbar-toggler-right 和 left 产生奇怪的行为
Bootstrap 4 Alpha 6 navbar-toggler-right and left create strange behavior
我有一个简单的导航栏:
<nav class="navbar navbar-inverse navbar-toggleable-md fixed-top custom-navbar" style="background-color: #321048;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav d-flex justify-content-end" style="width:100%">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#rolfing">Rolfing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#packages">Packages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
</ul>
</div>
</nav>
对于所有屏幕尺寸,一切都按预期工作。
我想右对齐切换器,因为菜单是右对齐的。所以根据 Bootstrap 4 alpha 6,我添加了
navbar-toggler-right
到按钮,它确实右对齐按钮,但导航栏本身不再扩展以填充按钮。所以切换按钮看起来只是浮动的。我很乐意将 navbar-toggler-right 放在外面让它工作,但我只是好奇它为什么会那样做。也许与具有绝对位置的 navbar-toggler-right 有关。 navbar-toggler-left 也做同样的事情。
编辑
为了提供更多细节,切换按钮位于左侧或右侧并不重要。添加 class navbar-toggler-left 会导致同样的问题。我的问题不是如何将切换按钮向右移动(我可以通过向按钮添加 float:right 来做到这一点),而是为什么
navbar-toggler-left 和 right classes 有这种奇怪的行为。
有一个未解决的问题:
https://github.com/twbs/bootstrap/issues/21846
解决方法是使用占位符代替 navbar-brand
<span class="navbar-text"> </span>
您可以尝试使用 navbar-toggle
而不是 navbar-toggler
。它可能会有所帮助,但在你的情况下,但不确定。
无意冒犯,但您应该只添加 .ml-auto
,这是有效的。
我遇到了同样的问题。品牌名称和切换器都左对齐。我用 <ul class="navbar-nav ml-auto ">
解决了这个问题。成功了。
那么,你可以试试<ul class="navbar-nav ml-auto ">
而不是 ul class="navbar-nav d-flex justify-content-end" style="width:100%"
我有一个简单的导航栏:
<nav class="navbar navbar-inverse navbar-toggleable-md fixed-top custom-navbar" style="background-color: #321048;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav d-flex justify-content-end" style="width:100%">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#rolfing">Rolfing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#packages">Packages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
</ul>
</div>
</nav>
对于所有屏幕尺寸,一切都按预期工作。
navbar-toggler-right
到按钮,它确实右对齐按钮,但导航栏本身不再扩展以填充按钮。所以切换按钮看起来只是浮动的。我很乐意将 navbar-toggler-right 放在外面让它工作,但我只是好奇它为什么会那样做。也许与具有绝对位置的 navbar-toggler-right 有关。 navbar-toggler-left 也做同样的事情。
编辑 为了提供更多细节,切换按钮位于左侧或右侧并不重要。添加 class navbar-toggler-left 会导致同样的问题。我的问题不是如何将切换按钮向右移动(我可以通过向按钮添加 float:right 来做到这一点),而是为什么 navbar-toggler-left 和 right classes 有这种奇怪的行为。
有一个未解决的问题:
https://github.com/twbs/bootstrap/issues/21846
解决方法是使用占位符代替 navbar-brand
<span class="navbar-text"> </span>
您可以尝试使用 navbar-toggle
而不是 navbar-toggler
。它可能会有所帮助,但在你的情况下,但不确定。
无意冒犯,但您应该只添加 .ml-auto
,这是有效的。
我遇到了同样的问题。品牌名称和切换器都左对齐。我用 <ul class="navbar-nav ml-auto ">
解决了这个问题。成功了。
那么,你可以试试<ul class="navbar-nav ml-auto ">
而不是 ul class="navbar-nav d-flex justify-content-end" style="width:100%"