html - HTML Bootstrap Carousel(轮播控件)
问题描述
关于目前面临的问题是 Bootstrap Carousel (from w3school) ,carousel-control 存在问题。
我面临的问题是,当我输入图像的超链接时,轮播控件比图像本身大(下面的屏幕截图)。
我的引导轮播代码
<div class="row">
<div class="col-12 col-md-12 banner-section">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<a href="facebook.com"><picture>
<source media="(max-width: 900px)" srcset="image/banner01small.jpg">
<img src="image/banner01" alt="banner" style="z-index:1" class="img-fluid">
</picture></a>
</div>
<div class="item">
<a href="instagram.com"><picture>
<source media="(max-width: 900px)" srcset="image/banner02small.jpg">
<img src="image/banner02" alt="banner" style="z-index:1" class="img-fluid">
</picture></a>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
解决方案
推荐阅读
- r - 获取字符向量的所有组合
- node.js - Docker 构建 nodejs 应用程序需要很长时间
- c# - 将正则表达式模式与名称列表匹配时面临的问题
- java - Docker + Spring Boot + Postgres-org.postgresql.util.PSQLException:连接尝试失败
- ruby - 继承 HTTParty 模块
- python-3.x - Python / tkinter:水平滚动条无法正常工作
- javascript - 我有一个带有非滚动左侧栏和可滚动右侧容器的页面。我想在容器中添加一个“转到顶部”按钮
- python - 使用函数在数据框中添加行
- python - 如何使用 Python 3 在 PC 中使用的最近文件中搜索?
- java - 如何访问 Stream 中的先前值