0

有人可以帮我在我正在处理的响应式 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-->

我尝试了我能想到的一切，但无法做到正确。任何帮助将不胜感激。

4

1 回答 1

-1

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

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

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

另外，请注意该.btn-navbar链接在<div>一个.hidden-desktop类中。

于 2013-04-26T17:29:36.483 回答