轮播图在bootstrap组件里?bootstrapv4轮播图去除两侧阴影及线框的方法

一、前提条件:

  在使用bootstrapv4中的轮播图组件时,两侧默认出现阴影,且轮播组件示例不一致!

二、bootstrap文档组件展示与实际应用

  1.官方文档展示如下:没有阴影

图片[1]-轮播图在bootstrap组件里?bootstrapv4轮播图去除两侧阴影及线框的方法-森戈教程网

2.实际应用情况如下:

图片[2]-轮播图在bootstrap组件里?bootstrapv4轮播图去除两侧阴影及线框的方法-森戈教程网

两侧阴影展示出来特别丑。经过网络搜索后,仍没有解决(ps:网上现有方案是解决旧版bootstrap的css,最早为2017年的,其他均为粘贴复制的,几乎一样)

三、解决方案

  1.进入bootstrap.css;

  2.搜索carousel-control-prev

  3.将color删除,并增加


background: none;   #去除阴影
border: none;  #去除线框

图片[3]-轮播图在bootstrap组件里?bootstrapv4轮播图去除两侧阴影及线框的方法-森戈教程网

  4.修改保存刷新后如下:

图片[4]-轮播图在bootstrap组件里?bootstrapv4轮播图去除两侧阴影及线框的方法-森戈教程网

© 版权声明
THE END
万水千山都是情,相遇都是缘分,喜欢就支持一下小编吧
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容