如何调整轮播控件上一个/下一个按钮的大小？答案

【问题标题】：How to resize carousel control prev/next buttons?如何调整轮播控件上一个/下一个按钮的大小？
【发布时间】：2023-04-09 22:12:01
【问题描述】：

有没有办法调整轮播上一个/下一个按钮的大小？我试图根据高度和宽度调整大小，他们会调整大小，但不会缩放。有没有carousel-control-small类型的类就像一个 btn (small-btn, etc,...)

这是我尝试过的：

<a class="carousel-control right" href="#mainCarousel" data-slide="next" style=" height: 30px; width:30px">&rsaquo;</a>

【问题讨论】：

不，没有专门的课程，您需要使用 css 直到您让它们看起来像您想要的那样。 height 和 width 将缩放圆圈，对于箭头，您需要调整 font-size 和可能 line-height
@koala_dev：酷！谢谢！

标签： twitter-bootstrap

【解决方案1】：

if you are making use of the default boostrap carousel the next and previous icon
 is located in this span below
<span class="carousel-control-next-icon fontIcon" aria-hidden="true"></span>


<span class="carousel-control-next-icon fontIcon" aria-hidden="true"></span>
create a css class like this
.fontIcon{
height: 50px;
width: 50px;
background-color:black;
border-radius: 15px;

}

【讨论】：

【解决方案2】：

每个@koala_dev：

不，没有专门的课程，您需要使用 css 直到您让它们看起来像您想要的那样。高度和宽度将缩放圆圈，对于箭头，您需要调整字体大小和可能的行高

【讨论】：

【解决方案3】：

我遇到了同样的问题。我所做的是直接修改CSS。你必须修改类

a.left.carousel-control 和 a.right.carousel-control

更改宽度。对于 HEIGHT，您必须修改轮播本身。

【讨论】：

【解决方案4】：

您可以像这样调整上一个/下一个图标的大小

.carousel-control-prev-icon 
{
    width: 24px;
    height: 24px;
}
    
.carousel-control-next-icon
{
    width: 24px;
    height: 24px;
}

【讨论】：