引导4 - 在使用移动设备

努力学习网站布局创建导航菜单问题上的最新bootstrap 4 alpha 4（与jQuery 3 conjustion），并在这个问题上我也想涵盖1个问题，我所遇到的那么远。引导4 - 在使用移动设备

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

为什么会出现这种情况？我如何强制列表，从右侧，而不是总是下拉（和动画后留在那里）？

这里是小提琴：http://jsfiddle.net/Wy22s/1073/

编辑：在接受的解决方案，没有右对齐。注意，在提琴有用于导航栏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">  <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/

来源

2016-09-30 Alex

请缩小这个和澄清。它可能需要单独的问题。 – ZimSystem

@ZimSystem点了。删除了问题2,3和4.现在它只是一个 - 最重要的。 – Alex

是和否:)我标记你的答案是正确的，但没有正确的排列正如我的问题要求..但我设法解决它不同。看看我的最新情况。 – Alex

这个问题已经基本被在这里找到答案： Bootstrap 4 responsive navbar vertical

在引导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

UPDATE：额外CSS不再需要自举4阿尔法6由于导航栏将垂直堆叠：http://www.codeply.com/go/cCZz5CsMcD

来源

2016-10-03 16:22:23 ZimSystem

引导4 - 在使用移动设备

回答

相关问题