bootstrap 两个轮播图冲突_请教bootstrap轮播图问题。

为什么用移动设备看的时候,轮播图的轮播(Carousel)指标位置偏了呢?用电脑看是正常的啊。

7f056c0177c3b2119047164db5f5e60b.png

ed232cd043e83cb21f747288453b36d8.png

<div class="slider" >

<div class="callbacks_container">

<ul class="rslides" id="slider">

<li>

<img src="images/banner1.jpg" alt="">

</li>

<li>

<img src="images/banner2.jpg" alt="">

</li>

<li>

<img src="images/banner3.jpg" alt="">

</li>

</ul>

</div>

</div>

贴代码才是王道。。。检测标签有没有正常关闭

你这里没用垂直居中,由于电脑分辨率比手机分辨率搞,所以细微的偏差差不错多大问题,但是到了移动端就出现大问题了。

解决方法也很简单,你用了定位但是没有减除自身高度的一半;

.pos{

position:absolute;

width:100px;

height:100px;

left:0;

top:50%;

margin-top: -50px;(就是这句代码…..)

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的轮播图的HTML代码,使用Bootstrap的Carousel组件: ```html <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://via.placeholder.com/800x400?text=Slide+1" class="d-block w-100" alt="Slide 1"> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/800x400?text=Slide+2" class="d-block w-100" alt="Slide 2"> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/800x400?text=Slide+3" class="d-block w-100" alt="Slide 3"> </div> </div> </div> ``` 这个轮播图包括三张幻灯片,每张幻灯片都是一个`carousel-item`,包含一张图片和一个标题。第一张幻灯片默认为`active`状态,表示默认显示。 你还需要在页面包含以下Bootstrap CSS和JS文件,以便轮播图正常工作: ```html <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-ILQkOW5q4Q7v7H4C2yJW0XJ2g8C4l9M8+UGt3x3hIZvHcV3J7h9/2h7e+8i8yLNT" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> ``` 这个轮播图的效果可以在以下链接查看: https://codepen.io/lyndonliu/pen/ZEyJyYJ
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值