Q: Toggle menu for mobile with bootstrap I am using bootstrap to make menu upper-right.
For desktop there are four menu shown on the upper-right correctly
If I make browser narrower for mobile environment.
The icon with there line appears, but even I click it, nothing happens.
These are my source code , is there any point???
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="/whitebear/web/app_dev.php/" class="navbar-brand">
            <img height="30px;" src="/whitebear/web/bundles/acmetop/img/whitebearLogo.png"></a>
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar-main" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/whitebear/web/app_dev.php/nice">Nice</a></li>
                <li><a href="/whitebear/web/app_dev.php/qanda">Q & A</a></li>
                                    <li><a href="/whitebear/web/app_dev.php/login">login</a></li>
                <li><a href="/whitebear/web/app_dev.php/register/" >register</a></li>

                        </ul>
        </div>
    </div>
</div>


A: Add a div to wrap the menu list with id of data-target attribute value(#navbar-main)
<div id="navbar-main" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    // li list 
  </ul>

