bootstrap-4 - 引导程序 3 | 旋转木马不滑动
问题描述
我试图用 bootstrap 3 创建一个轮播 .. 但它没有滑块我是 bootstrap 的初学者 我尽力了 ^^' .. 不太确定我的代码是否有问题,但我认为问题出在 bootstrap 3不稳定?如果你有什么建议请告诉我^_^这是我的codepen
<div class="container">
<div class="col-xs-12">
<h1>Bootstrap 3 Thumbnail Slider</h1>
<div class="well">
<div id="myCarousel1" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="https://fr.techtribune.net/wp-content/uploads/2021/01/boruto-chapter-55.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
</div>
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
</div>
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
</div>
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
</div>
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="https://fr.techtribune.net/wp-content/uploads/2021/01/boruto-chapter-55.jpg" alt="Image" class="img-responsive"></a>
</div>
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
</div>
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
</div>
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
</div>
<div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src=https://fr.techtribune.net/wp-content/uploads/2021/01/boruto-chapter-55.jpg" alt="Image" class="img-responsive"></a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel1" data-slide="prev">‹</a>
›</p>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
解决方案
推荐阅读
- vue.js - Nuxtj - 在身份验证过程后加载用户所有信息的最佳实践
- python - 以升序和逆序打印正整数范围 - Python
- javascript - 意外的令牌 / 在位置 0 Nodejs 的 json 中
- javascript - 我的 javascript 代码有问题 - 计算机必须猜测我输入的数字值
- python - Simpy 获取正在等待资源释放的元素
- emacs - tmux 覆盖 emacs 快捷方式
- php - ( sdonate) 1067 /var/www/donate/install.php 中“过期时间”的默认值无效:
- vuex - 页面加载突变 [Nuxt] [Vuex]
- batch-file - 如何使用批处理文件解压缩 ZIP 存档文件?
- angular - ngx-chips:无法从 autocompleteItems 添加第二个标签