<div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
        <label class="form-check-label" for="flexRadioDefault1">
          默认的单选框
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
        <label class="form-check-label" for="flexRadioDefault2">
          默认选中的单选框
        </label>
      </div>

禁用

添加 disabled 属性，关联的 <label> 会自动设置样式以匹配较浅的颜色，以帮助指示输入的状态。

<div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
        <label class="form-check-label" for="flexRadioDisabled">
          禁用单选框
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexRadioCheckedDisabled">
          禁用选中的单选框
        </label>
      </div>

默认（堆叠）

默认情况下，任何数量的直接同级单选框都将垂直堆叠并以 .form-check 适当间隔。

<div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
        <label class="form-check-label" for="exampleRadios1">
          篮球
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
        <label class="form-check-label" for="exampleRadios2">
          足球
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
        <label class="form-check-label" for="exampleRadios3">
          禁用的单选框
        </label>
      </div>

内联的

通过将 .form-check-inline 添加到任何 .form-check 将复选框或单选框分组到同一水平行。

<div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
        <label class="form-check-label" for="inlineRadio1">1</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
        <label class="form-check-label" for="inlineRadio2">2</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
        <label class="form-check-label" for="inlineRadio3">3 (禁用)</label>
      </div>

不使用 label

<div>
        <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
      </div>

单选切换按钮

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
      <label class="btn btn-secondary" for="option1">选中的</label>

      <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
      <label class="btn btn-secondary" for="option2">单选</label>

      <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
      <label class="btn btn-secondary" for="option3">禁用</label>

      <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
      <label class="btn btn-secondary" for="option4">单选</label>

边框样式

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
      <label class="btn btn-outline-success" for="success-outlined">Success 选中单选框</label>

      <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
      <label class="btn btn-outline-danger" for="danger-outlined">Danger 状态单选框</label>