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)& ...
随机推荐
- SQLServer访问WebServices提示:SQL Server 阻止了对组件 'Ole Automation Procedures' 的 过程'sys.sp_OACreate' 的访问
问题描述 在数据库中调用webservices, 提示:SQLServer访问WebServices提示:SQL Server 阻止了对组件 'Ole Automation Procedures' 的 ...
- python序列（七）序列操作的常用内置函数
1.len(列表):返回:列表中的元素个数,同样适用于元组.字典.集合.字符串等. max(列表).min(列表):返回列表中的最大或最小元素同样适用于元组.字典.集合.range对象等. sum(列 ...
- Redis不仅仅是缓存，还是……
你需要一个经典数据库吗? 一段时间以来,巨大数量的数据处理迫使所有的应用程序在数据库层前添加缓存策略.即使经典数据库进行了大量的下划线优化,仍然不能提供足够的速度和可用性.主要原因在于数据存储越远,获 ...
- Java学习日报10.1
学习内容一 ********************************** 代码 **********************************public class EnumTest ...
- 使用sqlmap
实验环境要求: 1.安装win7或win10的笔记本或PC电脑一台,硬盘100GB,内存8GB 2.安装VMware Workstation 14以上 总体目标:基于centos7搭建dvwa web ...
- 介绍一个新库： Norns.Urd.HttpClient
Norns.Urd.HttpClient Norns.Urd.HttpClient 基于AOP框架 Norns.Urd实现, 是对 System.Net.Http下的 HttpClient封装,让大家 ...
- Android基本组件TextView和EditView
1.TextView 用于在屏幕上显示文本,可以显示单行文本,多行文本,和带图像的文本. 常用xml属性 (1)android:autoLink,用于指定是否将指定的文本转换为可单机的超链接形式,其属 ...
- 看图知义，Winform开发的技术特点分析
整理一下自己之前的Winform开发要点,以图文的方式展示一些关键性的技术特点,总结一下. 1.主体界面布局 2.权限管理系统 3.工作流模块 4.字典管理 5.通用的附件管理模块 6.系统模块化开发 ...
- 十、scala、spark集群搭建
spark集群搭建: 1.上传scala-2.10.6.tgz到master 2.解压scala-2.10.6.tgz 3.配置环境变量 export SCALA_HOME=/mnt/scala-2. ...
- Vue自动化路由（基于Vue-Router）开篇
vue自动化路由 好久不见~ 若羽又开篇Vue的内容了. 年初的时候发布了第一版的ea-router自动化路由库,欢迎大家安装使用.［Github地址］ ［npm地址］ 经历一年的使用.还是发现了不少 ...