Jquery 引导程序4-移动设备上的导航菜单问题

尝试学习使用最新的

bootstrap4alpha4

（与

jquery3

）创建网站布局，在这个问题中，我想介绍到目前为止遇到的1个问题

当我点击导航栏“折叠模式”中的“菜单”按钮时，下拉列表会从中间下降，然后移到左侧。这看起来糟透了。问题说明：

为什么会发生这种情况？我如何强制列表始终从右侧下拉（并在动画播放后保持不变）

这是小提琴：

编辑：在接受的解决方案中没有右对齐。。请注意，在fiddle中，navbar有class

pull xs right

，但它不起作用：

因此，我通过在navbar之前添加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

更改）：

---

这个问题基本上在这里得到了回答：

在Bootstrap4中，默认情况下导航栏不会垂直堆叠，因此您必须添加一些CSS，使其工作方式与Bootstrap3.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;
    }
}

---

更新：引导4 Alpha 6不再需要额外的CSS，因为导航栏将垂直堆叠：

请缩小范围并澄清。它可能需要单独的问题，以确保系统的观点。删除问题2、3和4。现在它只是一个——最重要的。是和否：）我认为你的答案是正确的，但没有我问题中要求的正确答案。。但我设法以不同的方式修复了它。查看我的最新信息，了解我是如何做到这一点的。