为什么我的滑块不响应？

Question

我正在尝试使滑块具有响应性，但我不能。 所有代码都在这里。 我使用Bootstrap使滑块响应。 看来我缺少了一些东西。 如果我做错了方法，可以给我发送教程链接，我们将不胜感激。

的HTML

<div class="container">       
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xm-12 col-lg-12 img-responsive">
            <div id="slideShow"></div>                       
        </div>
    </div>          
</div> <!-- container -->

的CSS

#slideShow {
}

#slideShow img{  
    position: absolute;   // if i delete then the slider becomes responsive the images don't work as a slide  //
    opacity: 0;
    left: 20%;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
#slideShow .current{
    opacity: 1;
}
body{
    padding-top: 50px;
}

的JavaScript

window.onload = function(){    
    /* code for image slideshow  */
    var imgsrc = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
    for(var i = 1; i<=imgsrc.length; i++)
    {
        var slideShow = document.getElementById("slideShow");
        var newImage = new Image();
        newImage.src = "image/" + imgsrc[i];
        slideShow.appendChild(newImage);   
    }
    slideShow.childNodes[0].setAttribute("class","current img-responsive");
    var x = 0;
    setInterval(function(){
        slideShow.childNodes[x%3].setAttribute("class","img-responsive");
        slideShow.childNodes[(x+1)%3].setAttribute("class","current img-responsive");
    x++;
    },3000);  
    /* end of code for image slideshow  */   
};  // end of window onload function

Answer 1

因为您只将col-md-12设置为类-您还应该添加col-xs-**或col-sm-** 。 参见https://getbootstrap.com/examples/grid/