bootstrap 控制可关闭的Alerts的padding的CSS属性不起作用,

drnojrws 于 2个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(45)

先决条件

我有一个用于重复或已关闭问题的 searched
我有一个任何HTML以避免常见问题
我阅读了 contributing guidelines

描述问题

警报的垂直填充可以通过CCS属性 --bs-alert-padding-y 进行控制，但是这样做在使用关闭按钮时会导致奇怪的显示效果。
例如：

<div class="alert alert-info alert-dismissible fade show" style="--bs-alert-padding-y: 8px;" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.<br>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

产生以下结果：

我希望根据 --bs-alert-padding-y 调整关闭按钮的填充，以确保一致的调整大小。
同样，当设置 --bs-alert-padding-x 时，关闭按钮的填充也应该适应。

减少的测试用例

<div class="alert alert-info alert-dismissible fade show" style="--bs-alert-padding-y: 8px;" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.<br>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

您在哪个操作系统上看到问题？

Windows

您在哪个浏览器上看到问题？

Chrome

您正在使用哪个版本的Bootstrap?

5.2

Bootstrap

来源：https://github.com/twbs/bootstrap/issues/38587

2条答案

按热度按时间

vmdwslir1#

为了解决这个问题，一个可能的解决方案是使用相同的CSS属性调整关闭按钮的内边距。你可以通过向样式表中添加以下CSS规则来实现这一点：

.alert-dismissible .btn-close {
 --bs-alert-padding-y: var(--bs-alert-padding-y);
 --bs-alert-padding-x: var(--bs-alert-padding-x);
}

这条规则将关闭按钮的--bs-alert-padding-y和--bs-alert-padding-x变量设置为与警报的内边距相同的值，从而确保一致的尺寸。

或者，你可以使用calc()函数根据警报的内边距调整关闭按钮的内边距，如下所示：

.alert-dismissible .btn-close {
 padding-top: calc(var(--bs-alert-padding-y) - 0.5rem);
 padding-right: calc(var(--bs-alert-padding-x) - 0.5rem);
 padding-bottom: calc(var(--bs-alert-padding-y) - 0.5rem);
 padding-left: calc(var(--bs-alert-padding-x) - 0.5rem);
}

这条规则从警报的内边距中减去0.5rem以获得关闭按钮的内边距，这应该保持一致的尺寸。

希望这能帮助解决你遇到的问题！谢谢

赞(0）回复(0）举报 2个月前

xtupzzrd2#

调整CSS属性"--bs-alert-padding-y "可以影响警告的垂直填充，但在使用关闭按钮时可能会导致奇怪的显示效果，因为按钮的位置也受到填充的影响。
为了解决这个问题，你可能需要考虑调整警告容器的填充，而不是警告本身。这样，关闭按钮就不会受到影响，警告仍然具有所需的填充量。
例如，你可以尝试使用--bs-alert-container-padding-y来调整警告容器的填充。这应该允许你在避免与关闭按钮相关的任何奇怪显示效果的同时控制警告周围的间距。
或者，你可以尝试使用CSS调整关闭按钮的位置，使其即使在调整填充后也能保持正确的位置。例如，你可以使用position: absolute和top、bottom、left或right属性来定位关闭按钮。然而，这种方法需要一些额外的CSS代码，并且可能不是最有效的解决方案。

赞(0）回复(0）举报 2个月前

我来回答