Bootstrap 4 Alpha 6 navbar-toggler-right和left造成奇怪的行为

时间:2017-01-25 20:23:07

标签: twitter-bootstrap twitter-bootstrap-4

我有一个简单的导航栏:

<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>

所有屏幕尺寸都能正常运行。 enter image description here 我想对切换器进行正确的证明,因为菜单是正确的。所以根据Bootstrap 4 alpha 6,我添加了

navbar-toggler-right

按钮,它确实右对齐按钮,但导航栏本身不再展开以填充按钮。所以切换按钮看起来只是浮动。我满足于让navbar-toggler-right让它工作,但我只是好奇它为什么会这样做。与navbar-toggler-right有关,也许有绝对的位置。 navbar-toggler-left也做同样的事情。

enter image description here

修改 要提供更多细节,切换按钮位于左侧或右侧并不重要。添加类navbar-toggler-left会导致同样的问题。我的问题不是如何将切换按钮向右移动(我可以通过添加浮动:向右按钮来实现),但为什么 navbar-toggler-left和right类有这种奇怪的行为。

3 个答案:

答案 0 :(得分:6)

没有冒犯,但你应该只添加.ml-auto,这有效。

答案 1 :(得分:3)

这是一个未解决的问题:

https://github.com/twbs/bootstrap/issues/21846

解决方法是使用占位符而不是navbar-brand

<span class="navbar-text">&nbsp;</span>

答案 2 :(得分:0)

我有同样的问题。品牌名称和切换器都保持对齐。我用<ul class="navbar-nav ml-auto ">解决了这个问题。有效。

因此,您可以尝试<ul class="navbar-nav ml-auto "> 而不是ul class="navbar-nav d-flex justify-content-end" style="width:100%"