bootstrapv4轮播图去除两侧阴影及线框的方法

文章目录

  • 前言
  • 一、前提条件:
  • 二、bootstrap文档组件展示与实际应用
    • 1.官方文档展示如下:没有阴影
    • 2.实际应用情况如下:
  • 三、解决方案


前言

这篇文章主要介绍了bootstrapv4轮播图去除两侧阴影及线框的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下


一、前提条件:

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

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

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

bootstrapv4轮播图去除两侧阴影及线框的方法_第1张图片

2.实际应用情况如下:

bootstrapv4轮播图去除两侧阴影及线框的方法_第2张图片
两侧阴影展示出来特别丑。经过网络搜索后,仍没有解决(ps:网上现有方案是解决旧版bootstrap的css,最早为2017年的,其他均为粘贴复制的,几乎一样)

三、解决方案

1.进入bootstrap.css;

2.搜索carousel-control-prev

3.将color删除,并增加

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

bootstrapv4轮播图去除两侧阴影及线框的方法_第3张图片
4.修改保存刷新后如下:
bootstrapv4轮播图去除两侧阴影及线框的方法_第4张图片

你可能感兴趣的:(前端,前端)