Bootstrap 4 - 移动设备上导航菜单问题

Question

尝试使用最新的bootstrap 4 alpha 4（与jQuery 3一起）学习网站布局创建，在这个问题中，我想涵盖到目前为止遇到的一个问题。

当我在导航栏“折叠模式”下单击“菜单”按钮时，下拉列表会从中心下降，然后向左侧移动。这看起来很糟糕。问题解释如下： 为什么会发生这种情况，我该如何强制列表始终从右侧下拉（并在动画后保持在那里）？

这是fiddle链接：http://jsfiddle.net/Wy22s/1073/ 编辑：在接受的解决方案中没有右对齐。请注意，在fiddle中，导航栏有pull-xs-right类，但它不起作用： http://jsfiddle.net/Wy22s/1075/ 所以我自己做了一个解决方案，添加了一个clearfix div在导航栏之前：

    <a class="navbar-brand" href="#">Website</a>
  <div class="clearfix hidden-sm-up"></div>
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar1">
        <!-- <a class="navbar-brand" href="#">Fixed bottom</a> -->
        <div class="nav navbar-nav pull-xs-right">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link" href="#">About</a>
        </div>
    </div>

所以最后我采用了这种方法（不需要进行 CSS 更改）：

http://jsfiddle.net/Wy22s/1077/

- Alex

---

请缩小范围并澄清问题。可能需要分成不同的问题来解决。 - Carol Skelly

@ZimSystem 已经注意到了。已删除问题2、3和4。现在只剩下一个——最重要的一个。 - Alex

是的和不是的 :) 我将您的答案标记为正确，但并没有按照我的问题要求进行右对齐。但我设法以不同的方式解决了它。请查看我的更新，了解我如何确切地做到这一点。 - Alex

Answer 1

这个问题基本上已经在这里得到了回答：Bootstrap 4响应式导航栏垂直堆叠 在Bootstrap 4中，导航栏默认情况下不会垂直堆叠，因此您需要添加一些CSS使其像Bootstrap 3.x一样工作。

@media(max-width:544px) {
    .navbar .navbar-nav>.nav-item {
        float: none;
        margin-left: .1rem;
    }
    .navbar .navbar-nav {
        float:none !important;
    }
    .navbar .collapse.in, .navbar .collapsing  {
        clear:both;
    }
}

http://www.codeply.com/go/iapESdPQ7k

更新: 自Bootstrap 4 Alpha 6版本以来，额外的CSS不再需要，因为导航栏将会垂直堆叠: http://www.codeply.com/go/cCZz5CsMcD

- Carol Skelly