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

Question

尝试使用最新的 bootstrap 4 alpha 4（结合 jQuery 3）学习网站布局创建，在这个问题中，我想介绍我目前遇到的 1 个问题。

当我单击导航栏中的 "menu" 按钮时 "collapsed mode" - 下拉列表位于中心，然后移至左侧。这看起来很糟糕。问题解释：

为什么会发生这种情况，我如何强制列表始终从右侧下拉（并在动画后停留在那里）？

这是 fiddle：http://jsfiddle.net/Wy22s/1073/

编辑： 在接受的解决方案中没有右对齐.. 请注意，在 fiddle 中导航栏有 class pull-xs-right 但是它没有启动：

所以我继续通过在导航栏之前添加 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/

Answer 1

这个问题到这里基本得到解答：

在 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

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

bootstrap 4 - navigation menu issue on mobile devices

jquery

bootstrap-4

twitter-bootstrap-4