Question

我的目标：

在桌面视图中，选择省＆＃34;菜单应该消失。然后重新出现在Mobile View中。 有两个。一个是桌面视图中显示的select语句。另一个是移动

中显示的<li>下拉列表

我正在使用自定义css + bootstrap。我将受影响的部分放在块引用中，以便更好地了解我的问题所在。

我正在使用mobiletest.me来测试移动环境。

什么有效：在移动视图中，它会下降到移动导航栏。

如果我使用<section class="province-btn-remove"></section>它可以工作并隐藏在桌面视图中 - 但会弄乱样式。

什么不起作用：桌面视图中导航下显示的下拉菜单不应该隐藏。

HTML代码：

<nav>
     <div>
        <ul class="nav navbar-nav">

       <li class="left"><a href="http://convio.cancer.ca/site/TR?fr_id=[[S80:trID]]" class="home-btn" title="Home">Home</a></li>

       <li class="left"><a href="TR/Events?pg=informational&amp;type=fr_informational&amp;sid=9700&amp;fr_id=[[S80:trID]]" class="tours-btn" title="Register">Register</a></li>

       <li class="left"><a href="TR/Events?pg=pfind&amp;fr_id=[[S80:trID]]" class="about-btn" title="Search participants or teams">Find a Fundraiser</a></li>

       <li class="left"><a href="TR/Events/General?pg=informational&fr_id=21282&type=fr_informational&sid=6583" class="learn-btn" title="Learn more">Learn More</a></li>

       <li class="right"><a href="TR/Events?pg=pfind&amp;fr_id=[[S80:trID]]" class="donater-btn hvr-buzz-out" title="Donate to team or participant">DONATE</a></li>

<li class="provinces-btn-remove">
 <li title="Select Province">
  <li class="provinces-btn">
     <a class="dropdown-toggle" data-toggle="dropdown">Select Province<span class="caret"></span></a> 
     <ul class="dropdown-menu">
         <li><a href="#">Alberta</a></li>
         <li><a href="#">British Columbia</a></li>
         <li><a href="#">Ontario</a></li>
         <li><a href="#">Nunavut</a></li>
         <li><a href="#">Manitoba</a></li>
     </ul>  
   </li>
  </li>
</li>

  </ul>
 </div>
</nav>

我的CSS代码：

@media screen and (min-width: 769px){
    .provinces-btn-remove{
    visibility: hidden;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    }

}


@media screen and (max-width: 768px) {
.provinces-btn {

    width: 100%;
    margin-top: 16px;
    color: #FFFFFF !important;
    background-color: #0066CC;
    margin-left: 0px;


}

    .provinces-btn:hover, .provinces-btnActive {
        color: #FFFFFF !important;
        background: #1975D1;
        font-weight: 900;
    }

}

@media screen and (max-width: 604px) {
.provinces-btn {

    width: 100%;
    margin-top: 16px;
    color: #FFFFFF !important;
    background-color: #0066CC;
    margin-left: 15px;

   }

 }

如果您想知道我为什么不只是选择陈述并将其置于移动视图中是因为1.我不知道如何，以及2.我无法选择样式用于匹配移动视图导航的语句。我在之前的一个问题中询问了这一点，但仍然没有答案。

谢谢你的时间！

Answer 1

您的CSS（从功能上讲）是正确编写的 - 但是通过链接呈现的HTML与您上面粘贴的HTML不在同一层次结构中。

您正在visibility: hidden课程上尝试.provinces-btn-remove，但正如我在下面的屏幕截图中看到的那样，它是下拉列表的兄弟，而不包装下拉列表。< / p>

html order

请注意，保持断点为767px / 768px，而不是768px / 769px。 Bootstrap打破了前者。如果你没有将你的数据更新为767px / 768px，你将在调整大小时出现1px问题。

Answer 2

如果我已正确理解您的问题，您只需更改：

@media screen and (min-width: 769px){
  .provinces-btn-remove{
  visibility: hidden;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  }
}

为：

@media screen and (min-width: 769px){
  .provinces-btn{
  visibility: hidden;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  }
}

您似乎将目标定位为没有内容的类，而不是您想要的按钮

Answer 3

即使在Jimmy Amash回答正确之后，如果您使用Bootstrap，您应该使用他们的帮助程序类来根据断点隐藏或显示元素，因此使用CSS类hidden-md hidden-lg可以实现您想要的结果。

<li class="hidden-md hidden-lg">Won't show on desktop breakpoint medium and large </li>

使用CSS Framework的目的是使用它的大多数类来帮助维护代码，就像你改变Bootstrap LESS（或SASS）变量来改变断点像素宽度一样，你的代码应该保留行为并尽可能少地重写。 / p>

有关可见性帮助程序类的详细信息，请参阅Responsive Utilities on Bootstrap Docs。

如何隐藏桌面视图中导航栏中的“<li>”下拉菜单？

3 个答案: