twitter-bootstrap Bootstrap 4 Alpha 6 navbar-toggler-right 和 left 产生奇怪的行为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41860992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Alpha 6 navbar-toggler-right and left create strange behavior
提问by The4thIceman
I have a simple navbar:
我有一个简单的导航栏：
<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>
And everything works as expected for all screen sizes.
I wanted to right justify the toggler because the menu is right justified. So per Bootstrap 4 alpha 6, I added
对于所有屏幕尺寸，一切都按预期工作。
我想右对齐切换器，因为菜单是右对齐的。所以根据 Bootstrap 4 alpha 6，我添加了
navbar-toggler-right
to the button, and it indeed does right justify the button, but the navbar itself no longer expands to fill the button. So the toggle button looks to be just floating. I am content to leave navbar-toggler-right out let it work, but I am just curious why it would do that. something to do with navbar-toggler-right having an absolute position perhaps. navbar-toggler-left does the same thing as well.
到按钮，它确实正确对齐按钮，但导航栏本身不再扩展以填充按钮。所以切换按钮看起来只是浮动的。我很满足于将导航栏-toggler-right 放在外面让它工作，但我只是好奇它为什么会这样做。可能与 navbar-toggler-right 具有绝对位置有关。navbar-toggler-left 也做同样的事情。
EDITTo offer more detail, it does not matter that the toggle button be on the left or on the right. Adding the class navbar-toggler-left causes the same problem. My question is not how to move the toggle button to the right (I can do that by adding float:right to the button), but why the navbar-toggler-left and right classes have that strange behavior.
编辑为了提供更多细节，切换按钮在左侧还是右侧都没有关系。添加类 navbar-toggler-left 会导致同样的问题。我的问题不是如何将切换按钮向右移动（我可以通过向按钮添加 float:right 来实现），而是为什么 navbar-toggler-left 和 right 类具有这种奇怪的行为。
回答by Lei Sen
No offense but you should only add .ml-auto, that works.
无意冒犯，但您应该只添加.ml-auto，那行得通。
回答by Zim
There is an open issue for this:
有一个悬而未决的问题：
https://github.com/twbs/bootstrap/issues/21846
https://github.com/twbs/bootstrap/issues/21846
A workaround is to use a placeholder instead of the navbar-brand
解决方法是使用占位符而不是 navbar-brand
<span class="navbar-text"> </span>
<span class="navbar-text"> </span>
回答by MrzCD
I had the same problem. Both the brand name and the toggler were left aligned. I solved the problem with <ul class="navbar-nav ml-auto ">. It worked.
我有同样的问题。品牌名称和切换器都左对齐。我用<ul class="navbar-nav ml-auto ">. 有效。
So, you may try <ul class="navbar-nav ml-auto ">instead of ul class="navbar-nav d-flex justify-content-end" style="width:100%"
所以，你可以尝试<ul class="navbar-nav ml-auto ">代替 ul class="navbar-nav d-flex justify-content-end" style="width:100%"
回答by mohammad
You can try using navbar-toggleinstead of navbar-toggler. It might help but in your situation, but not certain.
您可以尝试使用navbar-toggle代替navbar-toggler. 它可能会有所帮助，但在您的情况下，但不确定。
