Question

我正在尝试修改引导程序导航栏，每次我尝试使用自己的CSS修改CSS时似乎都没有。我有一个汉堡包菜单图标，我只想在手机中显示，所以我修改了我的CSS显示：none;对于超过769px的媒体查询和显示：内联;适用于768px以下的显示器。该按钮仍显示在桌面上。 HTML：

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="glyphicon glyphicon-menu-hamburger"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">HOME<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/about.html">ABOUT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="blog.php">BLOG</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/video.html">VIDEOS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/photos.html">PHOTOS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/podcasts.html">PODCASTS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="pages/recaps">RACE RECAPS</a>
      </li>
     </ul>
    </div>
    <div id="logo">
    <a class="navbar-brand" href="#">LOGO</a> 
    </div>
    </nav>

CSS：

@media screen and (min-width 769px) {
button .navbar-toggler .navbar-toggler-left {
    display:none;
}
}
@media screen and (max-width 768px) {
button .navbar-toggler .navbar-toggler-left {
    display:inline;
}
}

注意：我已经尝试过没有“按钮”的CSS，也只是类。我也试过在div中包装按钮，没有运气。

Answer 1

如果css类选择器引用相同的元素，则它们不应该有空格：

@media screen and (min-width 769px) {
button.navbar-toggler.navbar-toggler-left {
display:none;
}
}
@media screen and (max-width 768px) {
button.navbar-toggler.navbar-toggler-left {
display:inline;
}
}

修改

还以最小宽度添加冒号：769px和最大宽度：768px。

Answer 2

Here is working example

空间从左到右寻找后代。

除非您在其他地方使用.navbar-toggler，否则无需添加元素的每个类

@media screen and (min-width: 769px) {
     .navbar-toggler {
        display: none;
    }
}

@media screen and (max-width: 768px) {
     .navbar-toggler {
        display: inline;
    }
}

引导程序导航修改

2 个答案: