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

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

使用以下媒体查询，如果屏幕为750px或更低，则引导程序导航元素中的nav元素将设置为：none。

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

导航栏项目未折叠

1 个答案: