当屏幕宽度为991px或更小时，在Bootstrap中加载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;
    }
}