Bootstrap 根据屏幕大小，将菜单项合并到下拉菜单中,

3yhwsihp 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(3)|浏览(171)

例如，我有一个菜单，其中包含以下项目：
1）

的情况下
当我更改浏览器大小时，最后两个项目合并了两个1下拉列表
2）

的情况
3）

的情况
我需要这样的东西。我有Contacts_France| Contacts_德国，当大小减小时，它们应合并到一个名为Contacts下拉列表中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MAx-nax</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact_france">Contact_France</a></li>
                <li><a href="#contact_germany">Contact_Germany</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

</body>
</html>

twitter-bootstrap

来源：https://stackoverflow.com/questions/44741560/depend-of-screen-size-merge-menus-items-to-dropdown-without-jquery

3条答案

按热度按时间

z31licg01#

<header>
    <nav class="navbar navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#!/" class="navbar-brand">Logo</a>
                <button data-toggle="collapse" data-target="#navbar-collapse" class="navbar-toggle collapsed">
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav">`enter code here`
                    <li role="presentation"><a href="#" class="hidden-sm">Germany</a></li>
                    <li role="presentation"><a href="#" class="hidden-sm">France</a></li>
                    <li role="presentation"><a href="#" class="hidden-sm">Poland</a></li>
                    <li role="presentation"><a href="#" class="hidden-sm">Czech Republic</a></li>
                    <li role="presentation"><a href="#" class="hidden-sm">Romania</a></li>
                    <li role="presentation"><a href="#" class="hidden-sm">Moldova</a></li>
                    <li role="presentation" class="dropdown hidden-xs hidden-lg hidden-md">
                        <a class="dropdown-toggle" data-toggle="dropdown">Western Europe<b class="caret"></b></a>
                        <ul class="dropdown-menu hidden-xs hidden-lg hidden-md">
                            <li role="presentation"><a href="#">Germany</a></li>
                            <li role="presentation"><a href="#">France</a></li>
                        </ul>
                    </li>
                    <li role="presentation" class="dropdown hidden-xs hidden-lg hidden-md">
                        <a class="dropdown-toggle" data-toggle="dropdown">East Europe<b class="caret"></b>&nbsp;&nbsp;&nbsp;</a>
                        <ul class="dropdown-menu hidden-xs hidden-lg hidden-md">
                            <li role="presentation"><a href="#">Poland</a></li>
                            <li role="presentation"><a href="#">Czech Republic</a></li>
                            <li role="presentation"><a href="#">Romania</a></li>
                            <li role="presentation"><a href="#">Moldova</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li role="presentation"><a href="#">Name</a></li>
                    <li role="presentation"><a href="#" class="hidden-xs hidden-lg"></a></li>
                    <li role="presentation"><a href="#" class="hidden-xs hidden-lg"><i class="glyphicon glyphicon-wrench"></i>&nbsp;&nbsp;&nbsp;</a></li>
                    <li role="presentation"><a href="#" class="hidden-xs hidden-lg"><i class="glyphicon glyphicon-log-out"></i>&nbsp;&nbsp;&nbsp;</a></li>
                    <li role="presentation"><a href="#" class="hidden-sm hidden-md">Setting</a></li>
                    <li role="presentation"><a href="#" class="hidden-sm hidden-md">Log out</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <br/>
</header>

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

ohtdti5x2#

一个JSfiddle到容易调整大小的能力。现在，有一些疯狂的切换在更多菜单在调整大小的事件。我不知道为什么会发生...

EDIT：可以在此处使用@圣地亚哥Rebella的解决方案进行求解。

JSfiddle
第一个

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

kcugc4gi3#