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

我正在尝试在Boostrap中优化网站的移动版本。我的div占用了我页面上的大量空间，并且我希望能够在991px或更小的屏幕宽度下在页面加载时隐藏此div。我想为用户提供一个选项，使其在单击按钮时显示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>

最佳答案

的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;
    }
}