如何在屏幕調整大小時顯示並隱藏切換按鈕

Question

當屏幕處於全尺寸時，我想顯示我的用戶列表（默認情況下並且沒有切換），並在屏幕處於移動大小時提供切換，以便顯示/隱藏列表。

我使用的代碼如下：

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Users Online</button> 

<div id="demo" class="collapse"> 
    <div ng-repeat="user in chatCtrl.userList">{{user}}</div> 
</div> 

<script> 
$(document).ready(function(){ 
    $("#demo").on("hide.bs.collapse", function(){ 
    $(".btn").html(' Users Online'); 
    }); 
    $("#demo").on("show.bs.collapse", function(){ 
    $(".btn").html(' Users Online'); 
    }); 
}); 
</script> 

它給我的切換，即使在全尺寸屏幕。

所以只有一個問題：如何僅在屏幕崩潰時顯示切換按鈕？

任何建議和參考將不勝感激！ 謝謝。

Answer 1

給您的按鈕ID和使用媒體查詢

@media(min-width:768px){ 
     #id-for-button{ 
     display:none; 
     } 
    } 

它將在上面的一切或768px您選擇的屏幕尺寸被隱藏。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries