html – bootstrap 3多列响应式转盘

概述我一直在玩自举转盘,试图让它每张幻灯片都显示4列.事情的响应方面是完美的,但是当最后一张幻灯片幻灯片转盘不回绕到第一张幻灯片时.它只是消失了谁能识别问题？ HTML <div id="carousel-example-generic" class="carousel slide"><!-- Indicators --><ol class="carousel-indicators"> < 我一直在玩自举转盘,试图让它每张幻灯片都显示4列.事情的响应方面是完美的,但是当最后一张幻灯片幻灯片转盘不回绕到第一张幻灯片时.它只是消失了谁能识别问题？

HTML

<div ID="carousel-example-generic" ><!-- Indicators --><ol >    <li data-target="#carousel-example-generic" data-slIDe-to="0" ></li>    <li data-target="#carousel-example-generic" data-slIDe-to="1"></li>    <li data-target="#carousel-example-generic" data-slIDe-to="2"></li></ol><!-- Wrapper for slIDes --><div >     <!-- SlIDe -->    <div >        <div >            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>        </div>    </div>    <!-- SlIDe -->    <div >        <div >            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>        </div>    </div>    <!-- SlIDe -->    <div >        <div >            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>            <div > <img src="http://placehold.it/260x180" alt=""/>                <div >This is a caption</div>            </div>        </div>    </div>    <!-- Controls -->     <a  href="#carousel-example-generic" data-slIDe="prev"> <span ></span> </a> <a  href="#carousel-example-generic" data-slIDe="next"> <span ></span> </a></div>

Js

$('#carousel-example-generic').carousel();

CSS

.carousel.slIDe img {    wIDth:100%;    height:auto;}

jsFiddle

[更新]这是一个更新的jsFiddle工作 – 感谢Adrift！

[update2] http://jsfiddle.net/S2rnm/795/此版本响应式显示不同的传送带,包含4,2或1列,具体取决于设备大小.它需要3个旋转木马的每个具有不同的可见x类.

解决方法 问题是你有.carousel-inner内的转盘控件 – 你只需要把它们放在这个类之外：

</div> <!-- Close the .carousel-inner class before the controls -->    <a  href="#carousel-example-generic" data-slIDe="prev">      <span ></span>    </a>    <a  href="#carousel-example-generic" data-slIDe="next">      <span ></span>    </a>

示例：http://jsfiddle.net/S2rnm/789/

总结

以上是内存溢出为你收集整理的html – bootstrap 3多列响应式转盘全部内容，希望文章能够帮你解决html – bootstrap 3多列响应式转盘所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。