时间戳

首页 > 解决方案 > 如何在引导多个项目轮播列与上一个和下一个按钮之间放置间隙

css - 如何在引导多个项目轮播列与上一个和下一个按钮之间放置间隙

问题描述

我正在使用 bootstrap 4 并编写了一个像这样的多项目轮播： 在此处输入图像描述

它运行良好，但我不能在每个列或项目之间放置一个间隙，并且我不希望显示第五列的一半。我向列或轮播项目添加了填充类，但它们并没有解决我的问题。当我向轮播添加填充时，它不会从左侧添加任何填充。

这是我的代码：

HTML：

<div class="col-12">
<div id="populars" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100 p-5" role="listbox">
<div class="carousel-item active bg-danger mx-2">
<div class="col-lg-3 col-md-6 card p-1 " style="line-height:1.2;">
<img class="img-fluid card-img-top" src="a.jpg">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-3 col-md-6 card p-1 " style="line-height:1.2;">
<img class="img-fluid card-img-top" src="a.jpg">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-3 col-md-6 card p-1 " style="line-height:1.2;">
<img class="img-fluid card-img-top" src="a.jpg">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-3 col-md-6 card p-1" style="line-height:1.2;">
<img class="img-fluid card-img-top" src="a.jpg">
</div>
</div>

</div>
<a class="carousel-control-prev w-auto" href="#populars" role="button" 
data-slide="prev">
<span class="carousel-control-prev-icon bg-dark" aria-hidden="true"> 
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#populars" role="button" 
data-slide="next">
<span class="carousel-control-next-icon bg-dark" aria-hidden="true"> 
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="btn btn-danger p-3 p-md-4 mx-auto mt-5 rounded-0">
show menu
</div>
</div>
</div>

CSS：

@media (min-width: 320px) {
#populars .carousel-inner .carousel-item-right.active,
#populars .carousel-inner .carousel-item-next {
transform: translateX(100%);
}
#populars .carousel-inner .carousel-item-left.active,
#populars .carousel-inner .carousel-item-prev {*
transform: translateX(-100%);
}
}
/* medium - display 2  */
@media (min-width: 768px) {
#populars .carousel-inner .carousel-item-right.active,
#populars .carousel-inner .carousel-item-next {
transform: translateX(50%);
}

#populars .carousel-inner .carousel-item-left.active,
#populars .carousel-inner .carousel-item-prev {
transform: translateX(-50%);
}
}

/* large - display 3 */
@media (min-width: 992px) {
#populars .carousel-inner .carousel-item-next {
transform: translateX(25%);
}
#populars .carousel-inner .carousel-item-left.active,
#populars .carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
@media (max-width: 768px) {
#populars .carousel-inner .carousel-item>div {
display: none;
}
#populars .carousel-inner .carousel-item>div:first-child {
display: block;
}
}
#populars .carousel-inner .carousel-item.active,
#populars .carousel-inner .carousel-item-next,
#populars .carousel-inner .carousel-item-prev {
display: flex;
}
#populars .carousel-inner .carousel-item-right,
#populars .carousel-inner .carousel-item-left {
transform: translateX(0);
}

感谢您的帮助。

标签： cssbootstrap-4

解决方案

为了在元素之间添加间隙，您可以使用 gap 属性。我有一个类似的项目，我正在使用 BS4 Carousel 并在我的卡片之间添加空间，我使用 gap。

例如：

HTML

  <div class="carousel-inner">
                    <div class="carousel-item">
                        <div class="slide-box">
                        ....your content here....

CSS：

.slide-box {
display: flex;
gap: 2rem;
}

推荐阅读