Bootstrap 5 个单选按钮 btn-check with btn-sm class

Question

我正在尝试使用 btn-check class 和 btn-sm 来获得更小的按钮，但是它忽略了小 class。我是不是遗漏了什么，或者有其他方法可以让按钮变小吗？

<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

给你...

从 <input> 个元素中删除 btn-sm class。
将 btn-sm class 添加到 <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>

Bootstrap 5 个单选按钮 btn-check with btn-sm class

Bootstrap 5 Radio toggle buttons btn-check with btn-sm class

radio-button

bootstrap-5