的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>倒塌默認

回答

相關問題