Bootstrap 3 Navbar won't collapse on mobile br

问题:

My Rails 4 site with the latest version of bootstrap will not collapse in mobile however if I open the site on desktop and shrink the window, it will collapse. Here is the code for my navbar:

<div class = "navbar navbar-inverse navbar-static-top">
    <div class = "container">
        <a href = "/" class = "navbar-brand" style="color: white;">Earn And Learn</a>
        <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
        </button>
    <div class = "collapse navbar-collapse navHeaderCollapse">
            <ul class = "nav navbar-nav navbar-right">
            <li id="nav_ach"><a href = "/about/achievements" style="color: white;">Achievements</a></li>
            <li id="nav_faq"><a href = "/about/faq" style="color: white;">FAQ</a></li>
            <li id="nav_test"><a href = "/about/testimonials" style="color: white;">Testimonials</a></li>
            <li id="nav_news"><a href = "/about/news" style="color: white;">In the News</a></li>
                <li id="nav_steal"><a href = "/steal/index" style=" color: white;">Steal This Idea!</a></li>
                <li><a href = "#" data-toggle="modal" data-target="#myModal" style="color: white;">Contact Us</a></li>
            </ul>
    </div>
</div>
</div>

回答1:

Dug through the github issues and it turns out we're missing this

<meta name="viewport" content="width=device-width, initial-scale=1.0">

http://getbootstrap.com/css/#overview-mobile

https://github.com/twbs/bootstrap/issues/10550

回答2:

there is missing the id of collapse

it must be

<div class = "navbar navbar-inverse navbar-static-top">
    <div class = "container">
        <a href = "/" class = "navbar-brand" style="color: white;">
            Earn And Learn
        </a>
        <button class="navbar-toggle" data-toggle="collapse" 
        data-target= ".navHeaderCollapse">
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
        </button>
    <div class = "collapse navbar-collapse" id="navHeaderCollapse">
            <ul class = "nav navbar-nav navbar-right">
            <li id="nav_ach"><a href="/about/achievements" 
            style="color: white;">Achievements</a></li>
            <li id="nav_faq"><a href="/about/faq" 
           style="color: white;">FAQ</a></li>
            <li id="nav_test"><a href = "/about/testimonials" 
            style="color: white;">Testimonials</a></li>
            <li id="nav_news"><a href = "/about/news" style="color: white;">
                In the News</a></li>
                <li id="nav_steal"><a href = "/steal/index" 
                 style="color: white;">Steal This Idea!</a></li>
                <li><a href = "#" data-toggle="modal" data-target="#myModal" 
                      style="color: white;">Contact Us</a></li>
            </ul>
    </div>
</div>
</div>

回答3:

This isnt standard bootstrap3. Look at the examples page to learn the syteax of bootstrap. At bootstrap3 there are other important classes to make it collapse. Look at the Examples or at my page to learn the basic code.

回答4:

You can use meta tag for providing device screen width

<meta name="viewport" content="width=device-width">