Bootstrap 4 Carousel如何在slide和responsive中获取控件
Bootstrap 4 Carousel how to get controls in slide and responsive
我正在尝试弄清楚如何在幻灯片中获取控件并同时使其响应。我已将边距左右设置为适当的像素,以使其位于最佳位置,但是当我检查它是否响应时,它最终会根据分辨率出现在不同的位置。
这是我的代码
https://codepen.io/andysaurusrex/pen/roPmOq
HTML
<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>
</div>
<div>
<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
.carousel-inner img {
margin: auto;
}
/* .carousel-control-prev {
margin-left: 425px;
}
.carousel-control-next {
margin-right: 425px;
} */
有什么办法可以解决这个问题吗?
提前致谢
.carousel-inner img {
max-width: 100%;
}
.carousel {
max-width: 800px;
margin: 0 auto;
}
我正在尝试弄清楚如何在幻灯片中获取控件并同时使其响应。我已将边距左右设置为适当的像素,以使其位于最佳位置,但是当我检查它是否响应时,它最终会根据分辨率出现在不同的位置。
这是我的代码 https://codepen.io/andysaurusrex/pen/roPmOq
HTML
<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>
</div>
<div>
<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
.carousel-inner img {
margin: auto;
}
/* .carousel-control-prev {
margin-left: 425px;
}
.carousel-control-next {
margin-right: 425px;
} */
有什么办法可以解决这个问题吗?
提前致谢
.carousel-inner img {
max-width: 100%;
}
.carousel {
max-width: 800px;
margin: 0 auto;
}