twitter-bootstrap - Bootstrap 4 Alpha 6 navbar-toggler-right 和 left 产生奇怪的行为

Question

我有一个简单的导航栏:

<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

到按钮，它确实右对齐按钮，但导航栏本身不再扩展以填充按钮。所以切换按钮看起来只是 float 的。我很乐意让 navbar-toggler-right 让它工作，但我只是好奇它为什么会这样做。可能与具有绝对位置的 navbar-toggler-right 有关。 navbar-toggler-left 也做同样的事情。



编辑
为了提供更多细节，切换按钮在左侧或右侧都没有关系。添加类 navbar-toggler-left 会导致同样的问题。我的问题不是如何将切换按钮向右移动(我可以通过在按钮上添加 float:right 来做到这一点)，而是为什么
navbar-toggler-left 和 right 类有这种奇怪的行为。

Answer 1

无意冒犯，但您应该只添加 .ml-auto ， 这样可行。