Question

我从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 -->

Answer 1

您也可以使用bootstraps“隐藏”类：hidden-xs用于额外的小型设备。例如：

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

Answer 2

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

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

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

}

Answer 3

简单：

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

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

这就是它的全部内容。让Bootstrap处理一切。没有必要使用自己的CSS来处理这种情况。

Answer 4

使用display: none;仅隐藏视图中的元素，并且不会将其从DOM流中删除。

使用visibility: none;来实现您的目标。

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

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

禁用移动屏幕尺寸的div？

4 个答案: