Geek Answers Handbook

Navbar crashes with bootstrap not working

I want to have a navigation bar that crashes when I change the screen size, so I decided to use Bootstrap.

In application.html.erb:

<body>
  <div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Some Store</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li><%= link_to "Browse Products" %></li>
          <li><%= link_to "Price List" %></li>
          <li><%= link_to "Contact Us" %></li>
          <li><%= link_to "Cart" %></li>
        </ul>
      </div>
    </div>
  </div>
</div>

In gemfile I have gem 'bootstrap-sass'

In application.css.scssI wrote@import 'bootstrap;'

In application.jsi have//= require bootstrap

I do not understand why this does not work, I just copied from the boot site

+4
source share
2 answers

, - . , . , , :

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="navbar-brand" href="#">Some Store</a>
    </div> <!-- end div class="navbar-header" -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><%= link_to "Browse Products" %></li>
        <li><%= link_to "Price List" %></li>
        <li><%= link_to "Contact Us" %></li>
        <li><%= link_to "Cart" %></li>
      </ul>
    </div> <!-- end div class="collapse navbar-collapse" -->
  </div> <!-- end div class="container" -->
</div> <!-- end div class="navbar navbar-default navbar-fixed-top" -->

, container navbar-inner <div class="navbar-header">, . div, , navbar-collapse nav-collapse, , . , , <a> <button>, data-target="navbar-collapse", . , < 768px.

<body> padding-top:51px;, , .

, !

+6

, application.html.erb ,

<meta charset="UTF-8"> <meta name=viewport content="width=device-width, initial-scale=1">

+2

More articles:


All Articles