Bootstrap 如何将折叠功能添加到现有响应式菜单？

zbsbpyhn 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(190)

我有这个菜单，它的工作正常，但我想在移动的屏幕上显示3行和隐藏和打开，当我点击它。我如何才能将此功能添加到菜单？像这个图像

选项卡：

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/34248789/how-add-collapse-feature-to-an-existing-responsive-menu

2条答案

按热度按时间

xxslljrj1#

您需要将navbar-collapse类和一个按钮添加到navbar-header div。
下面的代码将在屏幕缩小时添加汉堡图标。这将被添加到navbar-header。

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

下面的内容将被添加到包含菜单选项ul的空div中：

<div class="collapse navbar-collapse" id="myNavbar">

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

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

赞(0）回复(0）举报 2022-12-07

e5nqia272#

我认为你想有一个工作菜单一样，上面显示的图片在低屏幕分辨率。
所以首先你需要了解media queries是什么，然后在你的css中添加一个低屏幕分辨率的媒体查询，并适当地设置菜单的样式

赞(0）回复(0）举报 2022-12-07