Question

我目前正在重新设计一个拥有两排响应式导航栏的网站，但现在卡住了。

＆＃13;

@media (min-width: 767px) {
.nav.navbar-nav {
	float: right;
}
}

＆＃13;

<div class="navbar navbar-default navbar-fixed-top">

<div class="collapse navbar-collapse ">
<ul class="nav navbar-nav">
<li class="community"><a href="#"><strong>Community</strong></a></li>
<li class="global"><a href="#"><strong>Global</strong></a></li>

</ul>
</div>

<div class="navbar-header">

<div id="button" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>

<a class="brand" href="#"><img src="IMAGE/Oppo_green.png" height="24" width="150" alt=""></a>
</div>

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">

<li><a href="#"><strong>Home</strong></a></li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>Products</strong></a>
<ul class="dropdown-menu">
<li>Smartphones</li>
<li>Accessoires</li>
</ul>
</li>

<li><a href="a"><strong>ColorOS</strong></a></li> 

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>About</strong></a>
<ul class="dropdown-menu">
<li>Press</li>
</ul>
</li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>Support</strong></a> 
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>

<li><a href="#"><strong>Stores</strong></a></li>

</ul>
</div>
</div>

＆＃13;

如果屏幕比767px宽，它看起来像这样（看起来正是我想要的（查看第一张图片）......但是...... 当屏幕小于767px（第二张图像）时，导航菜单看起来像这样，这不是我想要的。＆＃34;社区＆＃34;和＆＃34;全球＆＃34;应显示在商店下方，但我该如何解决？

Answer 1

我只想添加重复的菜单选项，意味着在平板电脑/手机上隐藏第一个，并在平板电脑/手机上显示第二个，如下所示:(检查第二个导航底部进行调整）

<div class="navbar navbar-default navbar-fixed-top">
    <!-- hide this nav on tablet/phone ****************************** -->
    <div class="collapse navbar-collapse hidden-sm hidden-xs">
        <ul class="nav navbar-nav">
            <li class="community"><a href="#"><strong>Community</strong></a></li>
            <li class="global"><a href="#"><strong>Global</strong></a></li>    
        </ul>
    </div>    
    <div class="navbar-header">    
        <div id="button" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </div>    
        <a class="brand" href="#"><img src="IMAGE/Oppo_green.png" height="24" width="150" alt=""></a>
    </div>

    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">    
            <li><a href="#"><strong>Home</strong></a></li>    
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>Products</strong></a>
                <ul class="dropdown-menu">
                    <li>Smartphones</li>
                    <li>Accessoires</li>
                </ul>
            </li>    
            <li><a href="a"><strong>ColorOS</strong></a></li>    
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>About</strong></a>
                <ul class="dropdown-menu">
                    <li>Press</li>
                </ul>
            </li>    
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>Support</strong></a>
                <ul class="dropdown-menu">
                    <li>FAQ</li>
                    <li>Contact</li>
                </ul>
            </li>    
            <li><a href="#"><strong>Stores</strong></a></li>  

            <!-- ****************************************************** -->
            <li class="visible-sm visible-xs">
                <!-- link here (or dropdown) for "Community" -->
            </li> 
            <li class="visible-sm visible-xs">
                <!-- link here (or dropdown) for "Global" -->
            </li> 
        </ul>
    </div>
</div>

如何使双导航响应

1 个答案: