引导5单选切换按钮btn-check与btn-sm类

Question

我正在尝试使用btn-checkbtn-sm来获得更小的按钮，但它忽略了小类。是我遗漏了什么，还是有其他方法可以让按钮变小?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="row g-2 mx-2 my-2">
<div class="btn-group col-6" role="group">
<input type="radio" class="btn-check btn-sm" name="option" id="option-1" value="yes">
<label class="btn btn-outline-success" for="option-1">Yes</label>

<input type="radio" class="btn-check btn-sm" name="option" id="option-2" value="na">
<label class="btn btn-outline-secondary" for="option-2">I Don't Know</label>
<input type="radio" class="btn-check btn-sm" name="option" id="option-3" value="no">
<label class="btn btn-outline-danger" for="option-3">No</label>
</div>
</div>

Answer 1

给你…

1. 从<input>元素中移除btn-sm类
2. 将btn-sm类添加到<div class="btn-group col-6" role="group">和所有三个<label>元素中。

见下面的代码片段。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="row g-2 mx-2 my-2">
<div class="btn-group col-6 btn-sm" role="group">
<input type="radio" class="btn-check" name="option" id="option-1" value="yes" />
<label class="btn btn-outline-success btn-sm" for="option-1">Yes</label>
<input type="radio" class="btn-check" name="option" id="option-2" value="na" />
<label class="btn btn-outline-secondary btn-sm" for="option-2">I Don't Know</label>
<input type="radio" class="btn-check" name="option" id="option-3" value="no" />
<label class="btn btn-outline-danger btn-sm" for="option-3">No</label>
</div>
</div>

Answer 2

您也可以直接将div中的btn-group类更改为btn-group-sm。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row g-2 mx-2 my-2">
<div class="btn-group-sm col-6" role="group">
<input type="radio" class="btn-check" name="option" id="option-1" value="yes" />
<label class="btn btn-outline-success" for="option-1">Yes</label>
<input type="radio" class="btn-check" name="option" id="option-2" value="na" />
<label class="btn btn-outline-secondary" for="option-2">I Don't Know</label>
<input type="radio" class="btn-check" name="option" id="option-3" value="no" />
<label class="btn btn-outline-danger" for="option-3">No</label>
</div>
</div>