html - 如何在 bootstrap 3 中制作双层菜单？

Question

我试图在 Bootstrap 3 中制作双层菜单，看起来像这样:

我在使用 margin-top 顶部的菜单时遇到问题(我不知道如何修改它，因为我已经将菜单自定义为自定义高度)

代码如下

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container navbar_height">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="navbar-brand-left"></div>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a class="hover_navbar glyphicon glyphicon-home" href="#"></a></li>
            <li><a class="hover_navbar" href="#">ITEM1</a></li>
            <li><a class="hover_navbar" href="#">ITEM2</a></li>
            <li><a class="hover_navbar" href="#">ITEM3</a></li>
            <li><a class="hover_navbar" href="#">ITEM5</a></li>
            <li><a class="hover_navbar" href="#">ITEM6</a></li>

        </ul>


    </div
</div>

我添加了一些CSS

@media (min-width: 1023px){
.navbar{
position: relative;
min-height: 50px;
margin-bottom: 0px !Important;
border: 1px solid transparent;
 }

.navbar_height{
margin-top:40px;
}

.navbar-inverse .navbar-nav > li > a:hover{
    border-bottom: 4px solid #a6ba0d
}

.navbar-right{
    border-top: 1px solid #ededed;
}

.navbar-brand-logo img{
    margin-top:-20px;
}

抱歉，我没有将代码放在 jsfiddle 上(它在我的浏览器上不起作用)

Answer 1

答案很简单，我做到了:

之后:

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">

我补充说:

 <div class="navbar-collapse collapse desktop-only">
        <ul class="nav navbar-nav pull-right desktop-only">
            <li><a class="" href="#">item1up</a></li>
            <li><a class="" href="#">item2up</a></li>
            <li><a class="" href="#">item3up</a></li>
        </ul>


    </div>

还有一些 css 只在桌面可见:

@media (max-width: 1023px){
.desktop-only{
    display:none;
}}