javascript - 扁平 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
• 已验证其在/boostrap/css 中使用 Bootstrap 3
• 将所有 CSS 复制到/vendor/assets/stylesheets
• 将所有 javascript 复制到/vendor/assets/javascripts
• 已将所有图像复制到/vendor/assets/images
• 已将所有字体复制到/vendor/assets/fonts
• 使我的/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 看起来像

application.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 .

• 向 layouts/application.html.haml 添加了 Bootstrap 启动器标记

    !!!
    %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

我得到了类似的东西

所以，这基本上是我们遇到的版本不匹配问题

---

P.S.使用对 vendor css/js 文件中文件的引用可能会在生产时中断，因此我们可能需要将它们更新为 .scss 并将 url: 更改为 image-url: 等