css - Bootstrap 导航修改

Question

我正在尝试修改 Bootstrap 导航栏，但每次我尝试用自己的 CSS 修改它似乎都没有用。我有一个汉堡包菜单图标，我只想出现在移动设备上，所以我修改了我的 CSS 中的 display:none;对于超过 769px 和 display:inline 的媒体查询；适用于 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;
}
}

编辑

同时在 min-width: 769px 和 max-width: 768px 中添加冒号。