javascript - 导航栏元素不折叠

Question

一旦我将页面大小调整为 width:750px;，我的导航栏就不会折叠元素。我试过编辑我的 CSS，但我仍然一无所知。 This is my live page.

这是我的滑动条 CSS:

@media (max-width: 480px) { /* Slidebar width on extra small screens. */
.sb-slidebar {
    width: 70%;
}

.sb-width-thin {
    width: 55%;
}

.sb-width-wide {
    width: 85%;
}
}

@media (min-width: 481px) { /* Slidebar width on small screens. */
.sb-slidebar {
    width: 55%;
}

.sb-width-thin {
    width: 40%;
}

.sb-width-wide {
    width: 70%;
}
}

@media (min-width: 768px) { /* Slidebar width on small screens. */
.sb-slidebar {
    width: 40%;
}

.sb-width-thin {
    width: 25%;
}

.sb-width-wide {
    width: 55%;
}
}

@media (min-width: 992px) { /* Slidebar width on medium screens. */
.sb-slidebar {
    width: 30%;
}

.sb-width-thin {
    width: 15%;
}

.sb-width-wide {
    width: 45%;
}

#logo {
    text-align: left;
}
ul.navbar-nav {
    display: none;
}

}

@media (min-width: 1200px) { /* Slidebar width on large screens. */
.sb-slidebar {
    width: 20%;
}

.sb-width-thin {
    width: 5%;
}

.sb-width-wide {
    width: 35%;
}
#logo {
    text-align: left;
}
ul.navbar-nav {
    display: none;
}
}

这是我的 style.css:

@media (min-width: 768px){
#logo {
    text-align: left;
}
ul.navbar-nav {
    display: block;
}
}

@media (min-width: 1199px) {
ul.navbar-nav {
    display: block;
}

#logo {
    text-align: center;
}
}

这是我的 html:

<div class="navbar navbar-default navbar-fixed-top sb-slide" role="navigation">


    <div class="container">
        <!-- Logo -->
        <div id="logo" class="navbar-left">
            <a href="#"><img src="img/rsz_iconis-logo.jpg" alt="Iconis Logo" width="auto" height="40"></a>
        </div><!-- /#logo -->

        <!-- Menu -->
        <nav role="navigation">
            <ul class='nav navbar-nav navbar-right' id="navigate">
                <li data-slide='1'><a href="#">About Us</a></li>
                <li data-slide='2'><a href="#">Digital Ecosystem</a></li>
                <li data-slide='3'><a href="#">Fellow & Members</a></li>
                <li data-slide='4'><a href="#">SIGs</a></li>
                <li data-slide='5'><a href="#">Local Chapters</a></li>
                <li data-slide="7"><a href="#">Events</a></li>
                <li data-slide="8"><a href="#">Our Service</a></li>
                    </ul>
            </nav>

我只是想让它在我调整屏幕大小时隐藏我的菜单项。谢谢。

Answer 1

当页面大小调整为 750 像素或更低时，页面上的导航元素永远不会隐藏。

使用以下媒体查询， Bootstrap 导航元素中的 nav 元素将设置为显示:如果屏幕为 750 像素或更低，则无。

@media screen and (max-width : 750px) {
  nav {
    display: none;
  }
}