Bootstrap不提供半圆按钮组件，需用position: absolute配合border-radius: 50%在position: relative的.card内定位两个等宽高按钮，并通过calc()精确居中，避免使用.btn-sm或.text-center等干扰布局的类。
Card底部固定位置怎么用Bootstrap实现半圆按钮
直接说结论：Bootstrap本身不提供“半圆按钮”组件，但可以用border-radius配合position: absolute在.card容器内精准定位两个按钮——关键不是靠Bootstrap类，而是靠自定义CSS覆盖默认布局逻辑。
为什么不能只用btn-round或rounded-pill
Bootstrap 5没有btn-round这类内置类（那是旧版某些UI库的写法），rounded-pill会让按钮左右完全圆角，但高度不够时会变成椭圆而非正圆；更麻烦的是，它无法解决“固定在卡片底部居中对齐”这个布局需求。
-
rounded-pill依赖按钮内容宽度，文字长短会导致圆角变形 - 卡片
.card-footer默认是块级容器，放两个按钮会水平铺满或换行，不是并排半圆 - Bootstrap的
position-static默认值会让absolute定位失效，必须给.card加position: relative
实操：两个半圆按钮紧贴卡片底边居中排列
核心是三层控制：容器定位 + 按钮尺寸 + 圆角比例。按钮宽高必须相等才能出正半圆（实际是完整圆，视觉上因裁切/布局显“半圆感”）。
<div class="card" style="position: relative;"> <div class="card-body">...</div> <button class="btn btn-primary card-btn-half" style="width: 48px; height: 48px; border-radius: 50%;"></button> <button class="btn btn-outline-secondary card-btn-half" style="width: 48px; height: 48px; border-radius: 50%;"></button> </div>
再加一行CSS强制定位到底部中央：
.card-btn-half {
position: absolute;
bottom: 12px;
}
.card-btn-half:first-child {
left: calc(50% - 60px); /* 48px宽 + 12px间距的一半 */
}
.card-btn-half:last-child {
left: calc(50% + 12px);
}- 数值
60px=48px（按钮宽） + 12px（间隔），确保两按钮中心间距刚好 - 不要用
text-center或justify-content，它们对absolute元素无效 - 如果卡片有
.card-footer，先删掉它——否则footer会撑高底部，干扰绝对定位
移动端适配和常见踩坑
小屏下按钮容易重叠或掉出卡片外，因为calc(50% - 60px)在窄屏可能算出负值。
- 加
@media (max-width: 576px)，把按钮宽高缩到36px，间距减到8px - 避免用
bottom: 0——卡片如果有border-radius，按钮会贴到圆角边缘外，看起来悬空，bottom: 12px更稳妥 - 别给按钮加
font-size或padding，纯色圆按钮不需要文字，留白就是设计语言 - 如果用
btn-sm类，它会改padding和font-size，破坏圆度，直接用内联style控尺寸更可靠
真正难的不是画圆，是让两个圆在不同屏幕、不同卡片高度下始终“稳稳坐在底边同一水平线上”——这得靠position: absolute锚定，而不是靠Bootstrap栅格或flex猜位置。
