html – bootstrap轮播滑块自定义箭头
发布时间:2020-12-14 18:40:07 所属栏目:资源 来源:网络整理
导读:好的 我正在使用bootstraps轮播滑块,但使用自定义图像而不是随附的glyphicons. 然而,它的问题在于它们朝向滑块的边缘定位.左上角为左箭头,右上角为右图. 我已经尝试改变位置,但是当窗口重新调整大小时,它不会保持在它们的位置. 我不知道在哪里定位代码,以便
好的
我正在使用bootstraps轮播滑块,但使用自定义图像而不是随附的glyphicons. 然而,它的问题在于它们朝向滑块的边缘定位.左上角为左箭头,右上角为右图. 我已经尝试改变位置,但是当窗口重新调整大小时,它不会保持在它们的位置. 这是html. <div class="container-fluid banner_fluid"> <div class="carousel slide" data-ride="carousel" id="carousel_slider"> <div class="carousel-inner"> <div class="item active"> <img src="images/home_banner_1.jpg" alt="home slide 1" /> </div> <div class="item"> <img src="images/home_banner_2.jpg" alt="home slide 1" /> </div> <div class="item"> <img src="images/home_banner_3.jpg" alt="home slide 1" /> </div> </div> <div href="#carousel_slider" class="left carousel-control" data-slide="prev"> <span> <img src="images/chevron_left.jpg" /> </span> </div> <div href="#carousel_slider" class="right carousel-control" data-slide="next"> <span> <img src="images/chevron_right.jpg" /> </span> </div> </div> </div> 我使用开发人员工具快速查看和测试不同的选项.绝对位置不起作用.有没有其他方法可以实现它,所以它们与原始glyphicons出现在同一个位置并且也会响应? 带有建议修复的图片…… 到目前为止,代码中所做的更改是在轮播控件本身的类中添加了css和img-responsive. ————- banner —————- * / .banner_fluid { padding-left:0; padding-right:0; } .carousel-control { position: absolute; top: 50%; /* pushes the icon in the middle of the height */ z-index: 5; display: inline-block; } 我试过的其他代码都很好,但只在桌面视图中. 解决方法
将其添加到您的CSS文件中:
.carousel-control { position: absolute; top: 50%; /* pushes the icon in the middle of the height */ z-index: 5; display: inline-block; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |