當Boostrap在屏幕寬度爲991px或更小時崩潰時加載div

Question

我想優化Boostrap中我的網站的移動版本。我有一個div，它在我的頁面上佔用了很多空間，我希望能夠在頁面加載時隱藏這個div，任何屏幕寬度爲991px或更少。我想給用戶提供選項以在點擊按鈕時顯示div。我希望這個div出現在頁面加載的屏幕寬度大於992px。

我想知道Boostrap是否提供了一種不使用額外JavaScript的方法，如果可以的話，如何去做。如果不是，那麼完成我想要的最好方法是什麼。

<div class="mydiv"> 
    I want to be hidden on page load for screen width of 991px or less 
</div> 
<a class="btn" data-toggle="collapse" data-target=".mydiv">Show Div &raquo;</a> 

Answer 1

CSS

//hide for displays below 992px 
.mydiv { 
    dispaly:none; 
} 

@media (min-width: 992px) { 

//show for displays greater thatn 992px 
    .mydiv { 
     display:block; 
    } 
} 

，您可以使用引導切換到切換後，關 如果你想隱藏在顯示器上比992px

@media (min-width: 992px) { 
    #idforyourbutton { 
     display:none; 
    } 
} 

更大的按鈕