bootstrap轮播图怎么居中

bootstrap的轮播图代码直接用不修改的话，

容易出现以下情况：

很多人的解决办法就是把图片宽度设置为100%，但如果仅仅只是将图片设置为100%，则容易出现如下情况，整个轮播图填充了大部分页面，有时候这并不是我们想要的效果

解决办法就是先让为整个轮播块添加居中属性：class=‘container’；

效果如下：

如果整个轮播图默认居中后还是觉得占了大部分的页面想让整个轮播图占页面比例小些，可以给整个轮播块添加一个id，改变其CSS样式为70%或者其他百分比，只能改成百分比，千万不能改成有明确的宽度限制，如果不小心改成如800px的宽，则无法实现响应式，当窗口缩小后无法自适应。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>bootstrap轮播图</title><link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body {padding-top: 20px;
}
/* 自己自定义的id，区别bootstrap自带的id */
#abc {width: 70%;
}
#carousel-example-generic img{width: 100%;
}
</style>
</head>
<body>
<div class="container" id="abc"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators   按钮圆圈部分 --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li><li data-target="#carousel-example-generic" data-slide-to="4"></li>   </ol><!-- Wrapper for slides 图片部分--><div class="carousel-inner" ><div class="item active"><img src="data:images/1.jpg" alt="..."></div><div class="item"><img src="data:images/2.jpg" alt="..."></div><div class="item"><img src="data:images/3.jpg" alt="..."></div><div class="item"><img src="data:images/4.jpg" alt="..."></div><div class="item"><img src="data:images/5.jpg" alt="..."></div></div><!-- Controls 上一页下一页部分--><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>

转载于:https://www.cnblogs.com/kid2333/p/7513327.html

bootstrap轮播图怎么居中相关推荐

jQuery/Zepto的Bootstrap轮播图中图片自适应宽高并居中插件
2019独角兽企业重金招聘Python工程师标准>>> 今天写了一下午带晚上的jQuery/Zepto的Bootstrap轮播图插件,功能是能够根据当前较短的一边实现自适应宽度,并且 ...
bootstrap轮播图原点变为方块_JS实现无缝切换轮播图(自动+手动)
一.背景说起轮播图,大家应该都不陌生,各大购物网站和面试题里都能看到它的身影. 实现上也并不困难,而写这篇文章是想整理一下自己心血来潮写的代码,以及实现过程中的一些思考,大家也可以顺便复习巩固一下. ...
讲给后台程序员看的前端系列教程(52)——Bootstrap轮播图
C语言自学完备手册(33篇) Android多分辨率适配框架 JavaWeb核心技术系列教程 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View ...
bootstrap轮播图原点变为方块_BootStrap 4 轮播图实现缩放效果 | 智慧宫
BootStrap 4 Carousel 轮播图官方代码中,图片只有左右滚动效果,在最新的BootStrap 4.3版本 Carousel 效果增加了淡入淡出,但是远远不能满足我们的需求,下面提供一种 ...
解决bootstrap轮播图因为图片尺寸造成的问题
发现问题在使用bootstrap做轮播图时,由于图片尺寸,使得图片与轮播图结合的效果很差解决方案我们先找到轮播图的相关代码,如下: <div id="carousel ...
bootstrap轮播图代码详解
最近在做个人简历网站,然后要用到轮播图,上网查了一下,以下为轮播图代码: 下面展示一些内联代码片.  <div id="my ...
bootstrap轮播图
直接上代码: <div class="container" ><div id="myShuffArea" class="carous ...
bootstrap轮播图自动播放响应式箭头居中
转载于:https://www.cnblogs.com/yuanyuan-1994/p/8586979.html
BootStrap轮播图失效
失效情况为: 预期只显示一张图片,解雇一个页面上同时显示三张图片．解决办法: <link rel="stylesheet" href="https://cdn.s ...

bootstrap轮播图怎么居中

bootstrap轮播图怎么居中相关推荐

最新文章

热门文章