无法更改 Bootstrap 5 轮播指示器边框半径

Posted 2023-03-28

【中文标题】无法更改 Bootstrap 5 轮播指示器边框半径

【英文标题】：Can't change Bootstrap 5 carousel indicator border radius

【发布时间】：2021-11-10 00:17:05

【问题描述】：

我正在使用 Bootstrap 5.1 的轮播组件。我意识到无论我做什么，我都无法将边界半径添加到轮播指示器。它们总是矩形的，不接受边界半径。但在检查器中，它奇怪地显示指标（html 按钮）确实有一个边框半径但没有显示。我很混乱。我尝试在 css 中设置 .carousel-indicators [data-bs-target] 的样式，在 html 中添加了内联边框半径样式。他们都没有工作。

【问题讨论】：

您能添加您的代码吗？或者提供一个最小的可重现示例

您是否尝试过使用 Bootstrap 实用程序类，例如 rounded、rounded-1、rounded-2 等？

@tromgy 我有。而且它不起作用。

您看不到您正在应用的边框样式，因为顶部和底部都有不可见的边框。

它们确实有边框半径，只是边框是透明的。我认为他们让它透明的原因是增加可点击区域。白色指示器本身非常小。

【参考方案1】：

试试

.carousel-indicators [data-bs-target] 
  border-top: none;
  border-bottom: none;
  border-radius: 5px;
  height:6px;

元素有一个透明的边框，用边框半径设置样式，但由于它们是透明的，所以看不到。

【讨论】：

没错，我完全错过了透明边框。这种方式现在可以工作了。谢谢。