Flat-UI - 导航没有正确折叠。怎么修？

Question

我正在使用带有 Flat 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 添加了引导启动标记

！！！ %html ％头 %meta{:name => "viewport", :content => "width=device-width, initial-scale=1.0"} %title= content_for?(:title) ?产量（：标题）：'工作' %meta{:name => "description", :content => "#{content_for?(:description) ? yield(:description) : 'Work'}"} = stylesheet_link_tag“应用程序”，媒体：“全部”，“数据-turbolinks-track”=>真 = javascript_include_tag“应用程序”，“数据-turbolinks-track”=> true = csrf_meta_tags ％身体 %nav.navbar.navbar-inverse.navbar-fixed-top{角色：“导航”} 。容器 .navbar-header %button.navbar-toggle{"data-target" => ".navbar-ex1-collapse", "data-toggle" => "collapse", type: "button"} %span.sr-only 切换导航 %span.icon-bar %span.icon-bar %span.icon-bar %a.navbar-brand{href: "index.php"} 启动引导 .collapse.navbar-collapse.navbar-ex1-collapse %ul.nav.navbar-导航 %li %a{href: "#about"} 关于 %li %a{href: "#services"} 服务 %li %a{href: "#contact"} 联系人 。容器 。排 .col-lg-12 =渲染'布局/消息' =产量

我得到了类似的东西

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

---

附注在供应商 css/js 文件中使用对文件的引用可能会在生产中中断，因此我们可能需要将它们更新为 .scss 并将例如 url: 更改为 image-url: 等。

Answer 2

我看到的唯一改变是将 .container 移动到 .navbar 中。一切似乎都在这里工作：

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>

如果这仍然不起作用，你能用你的所有代码创建一个 Fiddle 吗？

Answer 3

你做了@import 'bootstrap'吗？在应用程序/资产/样式表下？如果不是，您需要在 app/assets/stylesheets 下创建一个名为“customization.css.scss”的文件，然后执行 @import 'bootstrap';