的Rails：引导导航栏从<strong>4.0.0.alpha6</strong>倒塌默认

更新bootstrap rubygem后4.0.0.beta的navbar默认行为是不是像以前那样工作。默认情况下，其中的链接隐藏在按钮后面，即使是全屏。的Rails：引导导航栏从<strong>4.0.0.alpha6</strong>倒塌默认

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav>

下面是截图：

我应该如何解决？

来源

2017-08-13 Raj Mishra

这似乎当您使用引导阿尔法CSS和JS与引导4.00测试版 – hasan

你解决问题？ – hasan

是的，我从测试版恢复为alpha：'gem'bootstrap'，'4.0.0.alpha6' –

您应该确定您使用的是bootstrap 4.00 beta css和js文件。引导公测

默认导航栏例子工程片段，这拨弄例如https://jsfiddle.net/s4qvqdbc/尝试更改的jsfiddle屏幕大小，然后你会看到倒塌，它的非折叠形式

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
<nav class="navbar navbar-expand-md navbar-light bg-light"> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 

 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
    <ul class="navbar-nav mr-auto"> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link disabled" href="#">Disabled</a> 
 
     </li> 
 
    </ul> 
 
    <form class="form-inline my-2 my-lg-0"> 
 
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
    </form> 
 
    </div> 
 
</nav>

来源

2017-08-13 08:40:16 hasan

对于beta版本：

导航栏需要包装.navbar与 .navbar-expand{-sm|-md|-lg|-xl}为响应崩溃和颜色方案类。

所以不是：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

它应该是：

<nav class="navbar navbar-expand-md navbar-light bg-faded">

Source

来源

2017-11-08 14:42:44

的Rails：引导导航栏从<strong>4.0.0.alpha6</strong>倒塌默认

回答

相关问题