Question

我创建了一个垂直导航栏，在移动设备上成为水平条时，切换功能出现问题。我试图多次绕过它，我最终为移动版创建了一个单独的样式表。但是，现在它会干扰桌面版本，如果我尝试隐藏移动版本，切换功能将停止工作。

我确定必须有一种更简单的方法来做到这一点，但我还没有找到任何可行的方法。

HTML 切换导航 KEDEV

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse-ex1-collapse" id="navbar-collapse-ex1-collapse">
            <ul class="nav navbar-nav-mobile">
                <li>
                    <a href="#about"><img class="icon" src="home.png"></a>
                </li>
                <li>
                    <a href="#services"><img class="icon" src="services.png"></a>
                </li>
                 <li>
                    <a href="#portfolio"><img class="icon" src="portfolio.png"></a>
                </li>
                <li>
                    <a href="#contact"><img class="icon" src="contact.png"></a>
                </li>
               </ul>
            <ul class="nav navbar-nav social">
                <li>
                    <a href="#"><img class="iconSO" src="twitter.png"></a>
                </li>
                <li>
                    <a href="#"><img class="iconSO" src="linkedin.png"></a>
                </li>
                <li>
                    <a href="#"><img class="iconSO" src="blogspot.png"></a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<!-- End Mobile Nav -->

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-right" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <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="#about">KEDEV</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a mouseover="buttonPress('1') class="menu-button" id="aboutButton" data-toggle="tooltip" data-placement="right" title="About" href="#about"><img class="icon" src="home.png"></a>
                </li>
                <li>
                    <a href="#services"><img class="icon" src="services.png"></a>
                </li>
                 <li>
                    <a href="#portfolio"><img class="icon" src="portfolio.png"></a>
                </li>
                <li>
                    <a href="#contact"><img class="icon" src="contact.png"></a>
                </li>
               </ul>
            <ul class="nav navbar-nav social">
                <li>
                    <a href="#"><img class="iconSO" src="twitter.png"></a>
                </li>
                <li>
                    <a href="#"><img class="iconSO" src="linkedin.png"></a>
                </li>
                <li>
                    <a href="#"><img class="iconSO" src="blogspot.png"></a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

CSS

/* MobileNav*/
.navbar-mobile {
    display:none;
}

.mnavbar-header{
    display:none;
}
.navbar-fixed-top{
        display:none!important;
}
/*Navigation*/
.container {
    width:100%;
    margin:0 auto;
    padding:0;
    border-sizing:border-box;
}
.navbar {
    margin-bottom:0;
    z-index:31;
    position:fixed;
    float:none;
    display:block;

}
 .navbar-collapse {
    height: 100%;
    border-top: 0;
    box-shadow: none;
    max-height: none;
    padding-left:0;
    padding-right:0;
    float:none;
    display:block;

}

  .navbar-collapse.collapse {
    display: block !important;
    width:100%;
    overflow: visible !important;

      margin-bottom:0px;
  }

 .navbar-collapse.in {
    overflow-x: visible;
  }

  .navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;
left:0;right:auto;}

.navbar-collapse .navbar-nav.navbar-right:last-child {
    margin-right: 0;
}
.navbar-brand {
    color:white;
    margin-bottom: 6em;
    font-size:2em;
}
.navbar li {
    margin: 0.5em 0.5em 0.5em 0.5em ;
    position:relative;

}   
.icon {
    width:2em;
    height:2em;
}
.social {
    margin-top:20em;
}
.social li {
    display:inline-block;
    margin: -1em -1.3em -2em -1.1em ;
}
.iconSO {
    width:2.3em;
    height:2.3em;
}

/* Media Query */

@media (max-width: 767px) {

.navbar {
         display:none;
}
.navbar-mobile {
        display:block !important;
        height:auto;
        width:auto;
    }
.mnavbar-header{
    display:block!important;
    overflow:visible;
}

.navbar-fixed-top {
    display:block !important;
    overflow:visible;
}

.navbar-collapse-ex1-collapse {
         background-color: rgba(0, 0, 0, 0.6) !important;
         float: left;
        margin-top: 0;
        margin-bottom: 0;

}
#navbar-collapse-ex1-collapse {
    position:fixed;
    left:0;
    width:100%;
    height:100%;
    overflow:visible;
    display:block ;

}

.nav-collapse.collapse-ex1-collapse {
display: block !important;
height: auto !important;
overflow: hidden !important;


}


.navbar-brand {
        margin-bottom:0;
        display:block;
    }

.navbar li {
        font-size:2em;
        text-align:center;
        display:inline;

}


body {
        padding-left: 0;
        padding-right: 0;
    }
}

Answer 1

在这里，这应该可以解决问题。

if (4 == 7) $roleKeys[] = $role["ROLE_KEY"];

Answer 2

感谢您的建议。我已经用了几个小时了，找到了答案。

我删除了相当多的媒体查询CSS并添加了一个溢出：隐藏到我的.navbar-mobile。

@media (max-width: 767px) {

.navbar-mobile {
        display:block !important;
        height:auto;
        width:auto;
        background-color: rgba(0, 0, 0, 0.6) !important;
        overflow:hidden;
    }

.mnavbar-header{
    display:block!important;    
    }

.navbar-collapse-ex1-collapse {
    float: left;
    margin-top: 0;
    margin-bottom: 0;   
    }

#navbar-collapse-ex1-collapse {
    left:0;
    width:100%;
    height:100%;
    display:block ;

    }

.nav-collapse.collapse-ex1-collapse {
    display: block !important;
    height: auto !important;
    }

.collapse.navbar-collapse-ex1-collapse {
    background-color: rgba(0, 0, 0, 0,1) !important;
    }

.navbar-brand {
    margin-bottom:0;
    display:block;
    }

.navbar li {
    font-size:2em;
    text-align:center;
    display:inline;
    }   

.navbar-collapse-ex1-collapse {
    display:block;
    }
}

我还在努力调整透明度和背景，但现在切换效果很好！

自定义Bootstrap Navbar响应问题

2 个答案: