在網頁的移動視圖中隱藏div元素

Question

我正在構建MEAN堆棧應用程序。目前，我正嘗試使用CSS媒體規則在移動視圖中隱藏某些div元素。在移動視圖中，使用按鈕下拉菜單將其設置爲使用ng-click單擊時在點擊時摺疊爲真/假。它按預期工作。但是在移動視圖中，如果下拉列表已激活，並且我將瀏覽器擴展爲更大尺寸，則菜單將進入網絡視圖，而不是預期的。任何人都可以在相同的幫助下？

下面是部分代碼：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
 
        data-target="#sidbar" aria-expanded="false" aria-controls="sidbar" ng-init="sidCollapsed=true" ng-click="sidCollapsed=!sidCollapsed"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 

 

 

 
<div id="sidbar" collapse="sidCollapsed" class="sidbar"> 
 
      <!--<ul class="nav navbar-nav navbar-left">--> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a ng-class="{'active':$location.path() == '/home'}" href="#/home">Home</a></li> 
 
       <li><a ng-class="{'active':$location.path() == '/profile'}" ng-show="user" href="#/profile">Profile</a></li> 
 
       <li><a ng-class="{'active':$location.path() == '/admin'}" ng-show="user && user.roles.indexOf('admin')>=0" href="#/admin">Admin</a></li> 
 
       <li><a ng-class="{'active':$location.path() == '/forms'}" ng-show="user" href="#/forms">Forms</a></li> 
 
      </ul> 
 
     </div> 
 

 

 

 
css: 
 

 
@media (min-width: 768px){ 
 
.sidbar { 
 
    display:none; 
 
}}

Answer 1

通過對事物的外表，你使用的引導，所以你可以使用hidden-xs類

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidbar" aria-expanded="false" aria-controls="sidbar" ng-init="sidCollapsed=true" ng-click="sidCollapsed=!sidCollapsed"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 



<div id="sidbar" collapse="sidCollapsed" class="sidbar hidden-xs"> 
    <!--<ul class="nav navbar-nav navbar-left">--> 
    <ul class="nav navbar-nav"> 
    <li><a ng-class="{'active':$location.path() == '/home'}" href="#/home">Home</a> 
    </li> 
    <li><a ng-class="{'active':$location.path() == '/profile'}" ng-show="user" href="#/profile">Profile</a> 
    </li> 
    <li><a ng-class="{'active':$location.path() == '/admin'}" ng-show="user && user.roles.indexOf('admin')>=0" href="#/admin">Admin</a> 
    </li> 
    <li><a ng-class="{'active':$location.path() == '/forms'}" ng-show="user" href="#/forms">Forms</a> 
    </li> 
    </ul> 
</div> 

你可以在Bootstrap文檔中找到更多可用的類來顯示和隱藏依賴於瀏覽器大小的元素。

• Responsive Utility Classes