当屏幕宽度为 991px 或更小时，在 Bootstrap 中加载 div

Question

我正在尝试在 Boostrap 中优化我的网站的移动版本。我有一个在我的页面上占用大量空间的 div，我希望能够在页面加载时隐藏这个 div，以适应任何 991 像素或更小的屏幕宽度。我想为用户提供在单击按钮时显示 div 的选项。我希望这个 div 出现在页面加载时屏幕宽度大于 992 像素。

我想知道 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;
    }
}