禁用移动屏幕尺寸的 div？答案

【问题标题】：Disable a div for mobile screen sizes?禁用移动屏幕尺寸的 div？
【发布时间】：2016-10-23 08:25:42
【问题描述】：

我从 bootstrap 2.0 升级到 3.0。我有这个滑块，它在每个动画中都会自行刷新，所以当你点击它时它会妨碍顶部的移动菜单。我尝试了 Display: none;，但它没有显示，但因为它仍在运行，它妨碍了移动导航栏。如何禁用 div 或使其不在较小的屏幕上加载？会是 JQuery 命令吗？

<style>
@media (max-width: 767px) {    #hiddenslider{
  display:none;
}
}

</style>

<!-- start: Slider -->
<div class="slider-wrapper" ID="hiddenslider">

    <div id="da-slider" class="da-slider">
        <div class="da-slide">
            <h2>Certified Techs </h2>
            <p>Text in Here</p>
            <a href="about.html" class="da-link">Read more</a>
            <div class="da-img"><img class='img-responsive'  src="img/parallax-slider/twitter.png" alt="image01" /></div>
        </div>
        <div class="da-slide">
            <h2>Is your Computer Slow?</h2>
            <p>Text in here</p>
            <a href="about.html" class="da-link">Read more</a>
            <div class="da-img"><img class='img-responsive' src="img/parallax-slider/responsive.png" alt="image02" /></div>
        </div>

        <nav class="da-arrows">
            <span class="da-arrows-prev"></span>
            <span class="da-arrows-next"></span>
        </nav>
    </div>

</div>
<!-- end: Slider -->

【问题讨论】：

您的 CSS 中缺少 }。 @media (max-width: 767px) 需要一个 {} 对，#hiddenslider 需要一个 {} 对。
还有别的吗？它隐藏了它，但有没有办法禁用它？
如果不显示，怎么会妨碍移动导航栏？

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您也可以使用引导程序“隐藏”类：hidden-xs 用于超小型设备。例如：

<div class="slider-wrapper hidden-xs" ID="hiddenslider">

【讨论】：

感谢 DavidG。下次会举个例子。

【解决方案2】：

尝试使用从DOM 中删除元素的jQuery .remove() 方法删除元素。您还可以设置何时删除元素。

if ($(window).width() <= 768) { // Set when you want it removed

 $("the-element").remove();

}

【讨论】：

我不会这样做，尤其是在分辨率为 1024x768 的设备上，因为这意味着旋转它意味着它在应该显示的时候不可见。
这就是为什么我建议设置他想要删除它的时间。
主要的一点是，这真的不需要。 OPs 代码要么工作正常，要么这里没有显示外部因素。只需要一个简单的媒体查询（或使用 Bootstrap 类）。

【解决方案3】：

简单：

<style>
/*
@media (max-width: 767px) {    #hiddenslider{
  display:none;
}
}
*/
</style>

<!-- start: Slider -->
<div class="slider-wrapper hidden-sm hidden-xs" ID="hiddenslider">

仅此而已。让 Bootstrap 处理一切。无需使用您自己的 CSS 来处理这种情况。

【讨论】：

【解决方案4】：

使用display: none; 只是从视图中隐藏元素，并不会将其从 DOM 流中移除。

使用visibility: none; 来实现你想要的。

您可以使用纯 CSS 通过媒体查询来更改：

@media (max-width: 767px) {
    #hiddenslider {
        visibility: none;
    }
}

【讨论】：