Twitter bootstrap 如何将折叠功能添加到现有的响应菜单？

我有这个菜单，它工作正常，但我想在手机屏幕上显示3行，并隐藏和打开时，我点击它。如何将此功能添加到菜单？ 喜欢这个图像吗

菜单：

http://www.bootply.com/7mGFGPnf43

---

我想你需要一个工作菜单，如上图所示，低屏幕分辨率

---

所以首先你需要知道你是什么。然后将媒体查询添加到css中以获得低屏幕分辨率，并适当设置菜单样式。您需要将

导航栏折叠
类和按钮添加到
导航栏标题
div中

以下内容将在屏幕缩小时添加汉堡图标。这将添加到
导航栏标题中

    <div class="navbar-header">
        <a class="navbar-brand " href="#">MyCompany</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
         <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
    </button>
    </div>

总之，这是最终的代码，它将在较小的设备上折叠导航栏

<nav style="margin-bottom:0px;border-radius:0px;border-color:white;font-size:medium;" class="navbar navbar-inverse ">
        <div class="container-fluid ">
            <div class="navbar-header">
                <a class="navbar-brand " href="#">MyCompany</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                 <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </button>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right text-center ">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Login</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> SignUp</a></li>
                </ul>


                <ul class="nav navbar-nav navbar-right text-center">
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">other product <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                            <li class="text-center "><a href="#">menu1</a></li>
                            <li class="text-center "><a href="#">menu2</a></li>
                            <li class="text-center "><a href="#">menu3</a></li>
                             <li class="text-center "><a href="#">menu4</a></li>
                             <li class="text-center "><a href="#">menu5</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle a" data-toggle="dropdown" href="#">Product1<span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                           <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">Women <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                            <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                        </ul>
                    </li>http://www.bootply.com/run#
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">Men <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                             <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                            <li class="text-center "><a href="#">submenu4</a></li>
                             <li class="text-center "><a href="#">submenu5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">HomePage</a></li>
                </ul>

            </div>
        </div>
    </nav>





























http://www.bootply.com/run#











@shimaamin很高兴我能帮忙！
<nav style="margin-bottom:0px;border-radius:0px;border-color:white;font-size:medium;" class="navbar navbar-inverse ">
        <div class="container-fluid ">
            <div class="navbar-header">
                <a class="navbar-brand " href="#">MyCompany</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                 <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </button>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right text-center ">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Login</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> SignUp</a></li>
                </ul>


                <ul class="nav navbar-nav navbar-right text-center">
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">other product <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                            <li class="text-center "><a href="#">menu1</a></li>
                            <li class="text-center "><a href="#">menu2</a></li>
                            <li class="text-center "><a href="#">menu3</a></li>
                             <li class="text-center "><a href="#">menu4</a></li>
                             <li class="text-center "><a href="#">menu5</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle a" data-toggle="dropdown" href="#">Product1<span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                           <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">Women <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                            <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                        </ul>
                    </li>http://www.bootply.com/run#
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">Men <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                             <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                            <li class="text-center "><a href="#">submenu4</a></li>
                             <li class="text-center "><a href="#">submenu5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">HomePage</a></li>
                </ul>

            </div>
        </div>
    </nav>