bootstrap 轮播图带缩列图两端对齐，并自动换行然后左对齐！
禁止自动轮播 data-interval="false"
完整代码如下：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
8 <script src="js/bootstrap4.min.js" type="text/javascript" charset="utf-8"></script>
9 <link rel="stylesheet" type="text/css" href="css/bootstrap4.5.min.css"/>
10 <style type="text/css">
11 .carousel-indicators{
12 position:static;
13 margin-right: 0;
14 margin-left: 0;
15 display: flex;
16 flex-wrap: wrap;
17 justify-content:space-between;
18 margin-top: 10px;
19 }
20
21 .carousel-indicators li{
22 background-color: rgb(0 0 0 / 33%);
23 width: 124px;
24 height: 90px;
25 border: none;
26 margin-bottom: 10px;
27 margin-right: 0px;
28 margin-left: 0px;
29 box-sizing: border-box;
30 text-indent: inherit;
31 }
32 .carousel-indicators .active img {
33 border: 2px solid #0070ff;
34 }
35
36 /*方法一：最后一行左对齐*/
37 .carousel-indicators > span {
38 width: 124px;
39 margin-right: 0px;
40 }
41
42 /*方法二 最后一行左对齐*/
43 /*.carousel-indicators::after{
44 content:"";
45 width: 32%;
46 }*/
/*适用于每行列数确定的场景*/
/*carousel-indicators：:after { content: ""; flex: auto; }*/
47
48 </style>
49 </head>
50
51 <body>
52
53 <div id="carouselImg" class="carousel slide p-5" data-ride="carousel" data-interval="false">
54 <div class="position-relative">
55 <div class="carousel-inner">
56 <div class="carousel-item active">
57 <img class="d-block w-100" src="img/bicycle/a.jpg"/>
58 </div>
59 <div class="carousel-item">
60 <img class="d-block w-100" src="img/bicycle/b.jpg"/>
61 </div>
62 <div class="carousel-item">
63 <img class="d-block w-100" src="img/bicycle/c.jpg"/>
64 </div>
65 <div class="carousel-item">
66 <img class="d-block w-100" src="img/bicycle/d.jpg"/>
67 </div>
68 <div class="carousel-item">
69 <img class="d-block w-100" src="img/bicycle/e.jpg"/>
70 </div>
71 <div class="carousel-item">
72 <img class="d-block w-100" src="img/bicycle/f.jpg"/>
73 </div>
74 <div class="carousel-item">
75 <img class="d-block w-100" src="img/bicycle/g.jpg"/>
76 </div>
77 <div class="carousel-item">
78 <img class="d-block w-100" src="img/bicycle/h.jpg"/>
79 </div>
80 <div class="carousel-item">
81 <img class="d-block w-100" src="img/bicycle/span.jpg"/>
82 </div>
83 </div>
84 <a class="carousel-control-prev" href="#carouselImg" role="button" data-slide="prev">
85 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
86 <span class="sr-only">Previous</span>
87 </a>
88 <a class="carousel-control-next" href="#carouselImg" role="button" data-slide="next">
89 <span class="carousel-control-next-icon" aria-hidden="true"></span>
90 <span class="sr-only">Next</span>
91 </a>
92 </div>
93
94 <ol class="carousel-indicators">
95 <li data-target="#carouselImg" data-slide-to="0" class="active">
96 <img class="w-100" src="img/bicycle/a.jpg"/>
97 </li>
98 <li data-target="#carouselImg" data-slide-to="1">
99 <img class="w-100" src="img/bicycle/b.jpg"/>
100 </li>
101 <li data-target="#carouselImg" data-slide-to="2">
102 <img class="w-100" src="img/bicycle/c.jpg"/>
103 </li>
104 <li data-target="#carouselImg" data-slide-to="3">
105 <img class="w-100" src="img/bicycle/d.jpg"/>
106 </li>
107 <li data-target="#carouselImg" data-slide-to="4">
108 <img class="w-100" src="img/bicycle/e.jpg"/>
109 </li>
110 <li data-target="#carouselImg" data-slide-to="5">
111 <img class="w-100" src="img/bicycle/f.jpg"/>
112 </li>
113 <li data-target="#carouselImg" data-slide-to="6">
114 <img class="w-100" src="img/bicycle/g.jpg"/>
115 </li>
116 <li data-target="#carouselImg" data-slide-to="7">
117 <img class="w-100" src="img/bicycle/h.jpg"/>
118 </li>
119 <li data-target="#carouselImg" data-slide-to="8">
120 <img class="w-100" src="img/bicycle/span.jpg"/>
121 </li>
122 <span></span><span></span><span></span><span></span>
123 <span></span><span></span><span></span><span></span> <!--要比li少一个哦-->
124 </ol>
125 </div>
126 </body>
127
128 </html>
效果预览：
bootstrap 轮播图带缩列图两端对齐，并自动换行然后左对齐！的更多相关文章
- bootstrap轮播图--兼容IE7
<!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...
- bootstrap轮播图 两侧半透明阴影
用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...
- Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- Bootstrap轮播获取当前活动的焦点对象
在项目中使用了Bootstrap的轮播,需求是轮播下方有一个已读按钮,当点击已读按钮时,隐藏掉当前的焦点的轮播内容: 如图所示: 所以要获取当前的焦点是哪一条: 下方代码是在网络上找到的一个方 ...
- bootstrap轮播组件之“如何关闭自动轮播”
在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...
- 第二百四十八节，Bootstrap轮播插件
Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
- Bootstrap 轮播（Carousel）插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
- bootstrap轮播组件,大屏幕图片居中效果
在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...
- Bootstrap 轮播
[Bootstrap 轮播] 1.要设置一个轮播界面,需要注意以下几点: 1)根div 必须为 class="carousel slide" 2)根div下含有三块子div a)& ...
随机推荐
- python初学者-判断一个数是否为素数
while True: #判断为真 num = int(input('请输入一个数:')) for i in range(2,num):#判断在num之前的数能不能把num整除 if(num%i == ...
- .netcore 微服务快速开发框架 Anno&Viper 注册中心 （服务上线下线预警通知）
1.微服务时代,服务上线先预警通知 在微服务大行其道的今天,相信很多人都用上了微服务或者是微服务的概念也已经有了一个深刻的了解.今天我们不在这里展开阐述,今天我们要说的是微服务伴侣预警通知. 2.注册 ...
- MethodHandleVS反射
Method Handle与反射 如无特殊说明,本文所有代码均基于JDK1.8.0_221 Method Handle入门 反射我们都知道,为我们提供了运行时对类的成员方法访问的手段,极大地提高了Ja ...
- 【代码周边】MongoDB与Mysql对比以及插入稳定性分析（指定主键的影响）
在数据库存放的数据中,有一种特殊的键值叫做主键,它用于惟一地标识表中的某一条记录.也就是说,一个表不能有多个主键,并且主键不能为空值. 无论是MongoDB还是MySQL,都存在着主键的定义. 对于M ...
- Linux嵌入式学习-mount命令+nfs挂载失败原因【转】
NFS 挂载失败原因[待搜集] 1.挂载时若出现mount.nfs: Input/output error 解决:在客户端也需启动portmap服务 service portmap status[查看 ...
- Azure Databricks 第二篇：pyspark.sql 简介
pyspark中的DataFrame等价于Spark SQL中的一个关系表.在pyspark中,DataFrame由Column和Row构成. pyspark.sql.SparkSession:是Da ...
- 五、Zookeeper、Hbase集群搭建
一.前提 1.安装JDK 2.安装Hadoop 3.安装zoookeeper 1.加入zookeeper包,并解压tar -zxvf zookeeper-3.4.9.tar.gz 2.去/etc/pr ...
- [论文阅读笔记] node2vec Scalable Feature Learning for Networks
[论文阅读笔记] node2vec:Scalable Feature Learning for Networks 本文结构 解决问题 主要贡献 算法原理 参考文献 (1) 解决问题 由于DeepWal ...
- Angular入门到精通系列教程（6）- Angular的升级
1. 摘要 2. https://update.angular.io/ 3. 总结 环境: Angular CLI: 11.0.6 Angular: 11.0.7 Node: 12.18.3 npm ...
- 从零开始的C程序设计大作业——学生成绩管理系统
前言 学生成绩管理系统可以说是C语言程序设计的结课的必备大作业了.花了些时间,费了些头发肝了下,完成了两个系统,一个是控制台版本的,另一个用easyx图形库进行了优化. 先放出完成后的演示图片占个坑. ...