[英]Bootstrap 4 carousel
有一个与Bootstrap 4的旋转木马不同寻常的问题,它正常工作然后我必须在某处改变某些东西,尝试删除它并发生同样的问题。 我的箭头位置不正确, 请看图像
<body>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="landmarks.html">Landmarks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="images.html">Image Gallery</a>
</li>
</ul>
<div class="container" align="center">
<h1 class="display-5">Gallery</h1>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="beach.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="lake.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="martyrsquare.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
我所拥有的微量css不会影响其中任何一个,但以防万一
.row{
padding: 20px;
}
body{
background-color: #e5e5e5;
}
箭头似乎在正确的位置。 看起来您的图像大小是导致它看起来不合适的原因。
尝试将以下类添加到您的CSS。
.carousel-item img {
width: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.