Bootstrap多个下拉菜单

Question

我试图让一个引导导航栏在小屏幕上分成两个独立的下拉菜单，其中一个菜单将使用带有小标记的语言，其余的将具有实际的菜单页面。我似乎不能让它工作，因为他们要么丢弃相同的菜单，要么只有其中一个工作。我不需要使用下面的工作，它只是一个模型。谢谢！

<?php  /* Navigation: Start */  ?>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <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">Trust</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only"></span>
                <img class="abe-language-flags-menu" src="images/flags/4x3/us.svg">
            </button>
            <a class="navbar-brand" href="index">Trust</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right ">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#" onmousedown="toggleOverlay()">Login</a></li>
                <li><a href="#hotels">Hotels</a></li>
                <li><a href="#rooms">Rooms</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="language">
                            <a class="abe-language-name" href="#">English </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/us.svg">
                        </li>
                        <li class="language">
                            <a class="abe-language-name" href="#">German  </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/de.svg">
                        </li>
                        <li class="language">
                            <a class="abe-language-name" href="#">Spanish </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/es.svg">
                        </li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Other languages</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<?php  /* Navigation: End */  ?>
<?php  /* Navigation: Start */  ?>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <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">Trust</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only"></span>
                <img class="abe-language-flags-menu" src="images/flags/4x3/us.svg">
            </button>
            <a class="navbar-brand" href="index">Trust</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right ">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#" onmousedown="toggleOverlay()">Login</a></li>
                <li><a href="#hotels">Hotels</a></li>
                <li><a href="#rooms">Rooms</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="language">
                            <a class="abe-language-name" href="#">English </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/us.svg">
                        </li>
                        <li class="language">
                            <a class="abe-language-name" href="#">German  </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/de.svg">
                        </li>
                        <li class="language">
                            <a class="abe-language-name" href="#">Spanish </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/es.svg">
                        </li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Other languages</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

   

Answer 1

所以我想通了，我为navbar和navbar2创建了独立的数据目标，并使用hidden-xs和hidden-sm等使它看起来很好。 :)感谢帮助@vanburenx问这个问题让我放心了另一种方法; - ）

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <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">Trust</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only"></span>
                <img class="abe-language-flags-menu" src="images/flags/4x3/us.svg">
            </button>
            <a class="navbar-brand" href="index">Trust</a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right ">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#" onmousedown="toggleOverlay()">Login</a></li>
                <li><a href="#hotels">Hotels</a></li>
                <li><a href="#rooms">Rooms</a></li>
                <li class="dropdown hidden-xs">
                    <a href="#" class="dropdown-toggle hidden-xs" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="language">
                            <a class="abe-language-name" href="#">English </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/us.svg">
                        </li>
                        <li class="language">
                            <a class="abe-language-name" href="#">German  </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/de.svg">
                        </li>
                        <li class="language">
                            <a class="abe-language-name" href="#">Spanish </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/es.svg">
                        </li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Other languages</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="navbar2" class="navbar-collapse collapse hidden-sm hidden-md hidden-lg">
            <ul class="nav navbar-nav navbar-right  hidden-sm hidden-md hidden-lg">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Change Language<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="language">
                            <a class="abe-language-name" href="#">English </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/us.svg">
                        </li>
                        <li class="language">
                            <a class="abe-language-name" href="#">German  </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/de.svg">
                        </li>
                        <li class="language">
                            <a class="abe-language-name" href="#">Spanish </a>
                            <img class="abe-language-flags img-rounded" src="images/flags/4x3/es.svg">
                        </li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Other languages</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>