css - 修改 Bootstrap Carousel 控件的高度?
问题描述
下图的蓝色部分显示了引导轮播的触发区域。我从bootstrap doc中截取了屏幕截图。
我想修改触发区域的高度(例如从转盘高度的 100% 到 50%)。我可以知道如何修改它吗?
提前致谢
解决方案
要解决这个问题,只需修改CSS中的.carousel-control-prev
和属性即可。.carousel-control-prev
.carousel-control-prev,
.carousel-control-next {
height: 25%;
top: 37.5%;
};
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
我不知道为什么该top
属性无法在演示中覆盖。但它适用于我的项目。
推荐阅读
- sql - 如何让 SQL 更灵活地处理“RR-MM-DD HH.MI.SSXFF AM”创建的内容 [22008][1855] ORA-01855:需要 AM/AM 或 PM/PM
- android - 滑动两个标签后片段更新中的 ViewPager
- c - 为什么缺少 vsnwprintf
- linked-list - 从单链表中删除节点时出现错误“无法移出借来的内容”
- laravel - laravel 删除 sweetalert 1 javascript
- html - 使下拉菜单向左打开而不是向右打开
- ios - 仅在推送通知到达时如何在点击之前获取通知
- asp.net-mvc - 为什么表中的排序顺序使视图在我的 MVC 应用程序中处于初始阶段
- java - 如何在四舍五入为整数的 af:inputText 中显示双精度数?
- c# - 如何防止一个更新面板中的两个按钮单击事件的完整回发?