Question

有人可以帮我在我正在处理的响应式Bootstrap单页模板上应用正确的媒体查询。我设法显示从240px到640px宽度而不是高达980px的切换菜单按钮，但我无法显示从640px到980px的主导航菜单。在980px之后它再次显示正常。

这是我为切换菜单按钮创建的媒体查询：

@media (min-width: 639px) { 
.btn-navbar {
display: none;
}
}

这里是整个标题部分的html：

<!-- header -->
<div class="masthead">
  <div class="stripes"></div>
  <div class="container"> 
    <!-- button for small devices-->
    <div class="row no-margin">
      <div class="span12">
        <div class="hidden-desktop"> <a class="btn btn-navbar"  data-toggle="collapse" data-target=".nav-collapse"><span class="icon-align-justify"></span></a></div>
        <div class="brand"> <a href="#intro"><img src="img/logo.png" alt="" /></a></div>
        <!-- navigation -->
        <div class="navbar main-nav">
          <div class="nav-collapse collapse" >
            <ul class="nav pull-right ">
              <li><a href="#intro">Home</a></li>
              <li><a href="#work">Intro</a></li>
              <li><a href="#services">Amulets</a></li>
              <li><a href="#blog">Gallery</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- end navigation --> 
  </div>
  <!-- end container --> 
</div>
<!-- end header-->

我尝试了所有我能想到但却无法做到的事情。非常感谢任何帮助。

Answer 1

你可以尝试简单地使用!important指令：

@media (min-width: 639px) {
    .btn-navbar { display: none !important; }
}

当然，这不是最优雅的解决方案。但是你的问题似乎与你的风格有关，而不是你的标记。它最有可能是相互冲突的风格。我认为对于这个问题，我们必须深入研究整个样式表才能找到问题。

另请注意，.btn-navbar链接位于<div>类.hidden-desktop内。

需要帮助分配正确的媒体查询

1 个答案: