如何隱藏` <li> `桌面視圖的導航欄中的下拉菜單？

Question

我的目標：

在桌面視圖中，“選擇省份”菜單應消失。 然后重新出現在Mobile View中。 其中有兩個。 一種是顯示在桌面視圖中的選擇語句。 另一個是<li>下拉列表，它將顯示在移動設備中

我正在使用自定義的CSS +引導程序。 我將受影響的部分放在引號中，以更好地了解問題所在。

我正在使用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;

   }

 }

如果您想知道為什么我不只是將select語句放置到移動視圖中是因為1.我不知道如何，以及2.我無法為select語句設置樣式以匹配移動視圖導航。 我在上一個尚未回答的問題中問過這個問題。

謝謝你的時間！

Answer 1

您的CSS（從功能上來說）編寫正確-但是通過鏈接呈現的HTML與您上面粘貼的HTML不在同一層次結構中。

您正在嘗試visibility: hidden在.provinces-btn-remove類上，但是如下面的屏幕快照所示，它是下拉列表的同級對象，並且沒有包裝下拉列表。

另外請注意，將斷點保持在767px / 768px，而不是768px / 769px。 引導程序在前者處中斷。 如果您未將其更新為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）變量以更改斷點像素寬度一樣，您的代碼應保留行為並盡可能減少重寫。

有關可見性幫助程序類的更多信息，請參見Bootstrap Docs上的響應實用程序 。