Question

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

当我点击＆＃34;菜单＆＃34;导航栏中的按钮＆＃34;折叠模式＆＃34; - 下拉列表在中心下降，然后转移到左侧。这看起来很糟糕。问题解释：

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

编辑没有正确对齐..请注意，在小提琴中有导航栏的pull-xs-right类，但它没有启动：

所以我继续通过在navbar：

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 responsive navbar vertical

在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 - 移动设备上的导航菜单问题

1 个答案: