Search code examples
ruby-on-railsdrop-down-menuruby-on-rails-4twitter-bootstrap-3bootswatch

Bootswatch dropdown in rails4 doesn't work

I am making a web app using rails 4 and I have choosen bootswatch.

I ran into trouble with dropdown from bootswatch (bootstrap 3).

It doesn't want to show up when I click.

Here is 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>

Can you please help..

Solution

  • I have found the solution.

    Since I copied bootswatch css code to bootstrap_and_overrides.css.scss i didn't removed require bootstrap, so I wouldn't have 2 bootstraps, but it seems that bootswatch code only revrites some things, and I need the main bootstrap included.

    Sorry to bother you with this silly thing.