css Bootstrap v5固定标记宽度

f87krz0w 于 2023-01-03 发布在 Bootstrap

关注(0)|答案(1)|浏览(139)

我有一个按钮，上面有一个通知徽章，但每当数字改变徽章的大小也改变了，这是不是超级好看：

<button class="btn btn-orange w-75 fs-4 mb-3 position-relative">
      Next Round
      <span class="position-absolute top-0 start-100 translate-middle rounded-pill badge bg-secondary fs-6">
        {{ count }}
      </span>
    </button>

注意：{{ count }}将变为1到9之间的数字。问题是当count从1变为2时，例如因为2的宽度比1宽。
我试过用固定的像素宽度和高度来设计它的样式，但是徽章从来不会停留在徽章的中间。

css

来源：https://stackoverflow.com/questions/74971601/bootstrap-v5-fixed-badge-width

1条答案

按热度按时间

6yoyoihd1#

添加一个min-width到span。我发现40px非常适合。尝试以下操作：

<button class="btn btn-orange w-75 fs-4 mb-3 position-relative">
    Next Round
    <span class="position-absolute top-0 start-100 translate-middle rounded-pill badge bg-secondary fs-6 d-flex align-items-center justify-content-center" style="min-width:40px; aspect-ratio: 1 / 1;">
      {{ count }}
    </span>
</button>

如果愿意，您可以随时将min-width调整为更大的尺寸。
希望这能有所帮助！

赞(0）回复(0）举报 2023-01-03

我来回答

css Bootstrap v5固定标记宽度

1条答案

相关问题

热门标签

最新问答