平面UI - 導航不能正確摺疊。怎麼修？

Question

我正在使用最新的帶有平面UI的Twitter Bootstrap。我試圖製作一個簡單的導航欄，當屏幕太小時會崩潰。我怎樣才能解決這個問題？

這裏是什麼樣子：

只有當我點擊「切換導航」按鈕做我的導航項目出現。

這是我的導航欄的HTML。它是直接從Flat-UI組件頁面複製的：

<div class="container"> 
    <nav class="navbar navbar-default" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 

     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 

     </ul> 
    </div><!-- /.navbar-collapse --> 
    </nav> 
</div> 

Answer 1

我有同樣的問題，我這是怎麼解決這個：

• 下載最新https://github.com/designmodo/Flat-UI
• 它是在/自舉/ CSS使用引導3恪
• 複製了所有的CSS /供應商/資產/樣式
• 複製了所有JavaScript來/供應商/資產/ JavaScript的
• 複製所有影像複製到/供應商/資產/圖像
• 複製所有字體到/供應商/資產/字體
• 使我/assets/javascripts/application.css.scss看起來像

application.css.scss

*= require ../../../vendor/assets/stylesheets/bootstrap.css 

*= require ../../../vendor/assets/stylesheets/flat-ui.css 

*= require ../../../vendor/assets/stylesheets/demo.css 

*= require_self 

*= require_tree . 

*/ 

• 使我的/assets/stylesheets/application.js看起來像

appli cation.js

//= require turbolinks 

    //= require ../../../vendor/assets/javascripts/jquery-1.8.3.min.js 

    //= require ../../../vendor/assets/javascripts/jquery-ui-1.10.3.custom.min.js 

    //= require ../../../vendor/assets/javascripts/jquery.ui.touch-punch.min.js 

    //= require ../../../vendor/assets/javascripts/bootstrap.min.js 

    //= require ../../../vendor/assets/javascripts/bootstrap-select.js 

    //= require ../../../vendor/assets/javascripts/bootstrap-switch.js 

    //= require ../../../vendor/assets/javascripts/flatui-checkbox.js 

    //= require ../../../vendor/assets/javascripts/flatui-radio.js 

    //= require ../../../vendor/assets/javascripts/jquery.tagsinput.js 

    //= require ../../../vendor/assets/javascripts/jquery.placeholder.js 

    //= require ../../../vendor/assets/javascripts/jquery.stacktable.js 

    //= require ../../../vendor/assets/javascripts/application.js 

    //= require_tree . 

• 增加了引導啓動的標記來佈局/ application.html。HAML

 
    !!! 
    %html 
     %head 
     %meta{:name => "viewport", :content => "width=device-width, initial-scale=1.0"} 
     %title= content_for?(:title) ? yield(:title) : 'Work' 
     %meta{:name => "description", :content => "#{content_for?(:description) ? yield(:description) : 'Work'}"} 
     = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true 
     = javascript_include_tag "application", "data-turbolinks-track" => true 
     = csrf_meta_tags 
     %body 
     %nav.navbar.navbar-inverse.navbar-fixed-top{role: "navigation"} 
      .container 
      .navbar-header 
       %button.navbar-toggle{"data-target" => ".navbar-ex1-collapse", "data-toggle" => "collapse", type: "button"} 
       %span.sr-only Toggle navigation 
       %span.icon-bar 
       %span.icon-bar 
       %span.icon-bar 
       %a.navbar-brand{href: "index.php"} Start Bootstrap 
      .collapse.navbar-collapse.navbar-ex1-collapse 
       %ul.nav.navbar-nav 
       %li 
        %a{href: "#about"} About 
       %li 
        %a{href: "#services"} Services 
       %li 
        %a{href: "#contact"} Contact 
     .container 
      .row 
      .col-lg-12 
       = render 'layouts/messages' 
       = yield

而且我得到了類似

因此，它基本上我們有

---

附註：在版本不匹配的問題使用對供應商css/js文件中的文件的引用可能會在製作時中斷，因此我們需要將它們更新到.scss並將其更改爲例如url:到image-url:等。

Answer 2

@import'bootstrap';在app/assets/stylesheets下？如果不是，則需要在app/assets/stylesheets下創建一個名爲「customization.css.scss」的文件，然後執行@import'bootstrap';

Answer 3

我看到的唯一改變就是移動.navbar中的.container。似乎一切都在這裏工作：

http://jsfiddle.net/Lk3AZ/

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 

     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 

     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div> 
    </nav> 

如果這仍然不起作用，你可以創建所有代碼的小提琴？