rails4中的Bootswatch下拉列表不起作用

时间:2013-10-07 16:31:29

标签: ruby-on-rails drop-down-menu ruby-on-rails-4 twitter-bootstrap-3 bootswatch

我正在使用rails 4创建一个Web应用程序,我选择了bootswatch。

我遇到了来自bootswatch(bootstrap 3)的下拉菜单。

单击时不想显示。

这是HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'>
    <title>IKStudio</title>
    <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
    <link data-turbolinks-track="true" href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />
    <link data-turbolinks-track="true" href="/assets/exhibits.css?body=1" media="all" rel="stylesheet" />
    <link data-turbolinks-track="true" href="/assets/static.css?body=1" media="all" rel="stylesheet" />
    <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/jquery.turbolinks.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/exhibits.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/jquery.roundabout.min.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/static.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
    <meta content="authenticity_token" name="csrf-param" />
    <meta content="DZN3XrjOOv0yfuqzEZ9b8M5r7gWkkQmY1Z+VtW5Z5VY=" name="csrf-token" />

  </head>
  <body>
    <div class='navbar navbar-default navbar-fixed-top'>
      <div class='container'>
        <div class='navbar-header'>
          <a class="navbar-brand" href="/">TEST</a>
        </div>
        <div class='navbar-collapse collapse' id='navbar-main'>
          <ul class='nav navbar-nav navbar-right'>
            <li><a href="/test">TEST</a></li>
            <li class='dropdown'>
              <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
                KOLEKCIJE
                <b class='caret'></b>
              </a>
              <ul class='dropdown-menu'>
                <li><a href="/">muski</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class='container' id='main'>
      <div class='row'>
        <div class='col-md-2'></div>
        <div class='col-md-8'>
        </div>
        <div class='col-md-2'></div>
      </div>
    </div>
  </body>
</html>

你能帮忙吗..

2 个答案:

答案 0 :(得分:1)

您要加载资产两次。您应该只在头文件中包含application.js和application.css,并且每个文件中的树指令将自动加载资源路径中的所有其他文件。在这里,我使用的是宝石的bootstrap和jQuery。

的application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.ui.all
//= require bootstrap
//= require_tree .
//= require turbolinks

application.css

*
*= require_self
*= require jquery.ui.all
*= require_tree .
*/

答案 1 :(得分:0)

我找到了解决方案。

由于我将bootswatch css代码复制到bootstrap_and_overrides.css.scss我没有删除require bootstrap,所以我不会有2个bootstraps,但似乎bootswatch代码只修改了一些东西,我需要包含主引导程序

很抱歉打扰你这件傻事。