如何使固定宽度的Bootstrap单选按钮保持统一高度？

我正在使用设置为200px宽度的Bootstrap单选按钮，当按钮内的文本长度超过该宽度时会自动换行，导致按钮高度发生变化。请问如何让其他按钮也调整为相同的高度？

对应的代码片段：

<!-- question 7 -->
<div class="row mb-4">
  <div class="btn-group justify-content-center" role="group" aria-label="Basic radio toggle button group">
    <div class="row"><p><strong style="display: inline">Q7</strong> {{ post.question7 }}</p></div>
  </div>
  <div class="row justify-content-center mx-auto">
    {% if post.url7 %}
    <div class="row"><img class="maths" src="static/test/{{ post.url7 }}"></div>
    {% endif %}
    <fieldset id="group7">
      <div class="form-check-inline spelling_button p-0 mb-1 mx-auto">
        <input type="radio" class="btn-check" id="q7a" name="options7" value="ae" autocomplete="off" required>
        <label class="btn btn btn-outline-primary quiz" for="q7a"><strong style="display: inline">A:</strong> {{ post.ae }}</label>
      </div>
      <div class="form-check-inline spelling_button p-0 mb-1 mx-auto">
        <input type="radio" class="btn-check" id="q7b" name="options7" value="af" autocomplete="off">
        <label class="btn btn btn-outline-primary quiz" for="q7b"><strong style="display: inline">B:</strong> {{ post.af }}</label>
      </div>
      <div class="form-check-inline spelling_button p-0 mb-1 mx-auto">
        <input type="radio" class="btn-check" id="q7c" name="options7" value="ag" autocomplete="off">
        <label class="btn btn btn-outline-primary quiz" for="q7c"><strong style="display: inline">C:</strong> {{ post.ag }}</label>
      </div>
      <div class="form-check-inline spelling_button p-0 mb-1 mx-auto">
        <input type="radio" class="btn-check" id="q7d" name="options7" value="ah" autocomplete="off">
        <label class="btn btn btn-outline-primary quiz" for="q7d"><strong style="display: inline">D:</strong> {{ post.ah }}</label>
      </div>
      <div class="form-check-inline spelling_button p-0 mb-1 mx-auto">
        <input type="radio" class="btn-check" id="q7e" name="options7" value="ai" autocomplete="off">
        <label class="btn btn btn-outline-primary quiz" for="q7e"><strong style="display: inline">E:</strong> {{ post.ai }}</label>
      </div>
    </fieldset>
  </div>
</div>

可以通过以下几种方式实现所有按钮高度一致：

方法1：利用Bootstrap的Flex布局类 #

给包裹按钮的fieldset容器添加d-flex、align-items-stretch和flex-wrap类，让Flex布局自动拉伸所有子元素到相同高度：

<fieldset id="group7" class="d-flex align-items-stretch flex-wrap justify-content-center">
  <!-- 按钮代码保持不变 -->
</fieldset>

方法2：自定义CSS设置最小高度 #

给按钮添加自定义样式，设置足够容纳最长文本的最小高度，同时让文本居中：

.quiz {
  min-height: 60px; /* 根据实际换行后的高度调整数值 */
  display: flex;
  align-items: center;
  justify-content: center;
}

方法3：使用Bootstrap的h-100类 #

给每个按钮的label标签和父容器form-check-inline都添加h-100类，让按钮占满父容器高度，同时配合Flex实现文本居中：

<div class="form-check-inline spelling_button p-0 mb-1 mx-auto h-100">
  <input type="radio" class="btn-check" id="q7a" name="options7" value="ae" autocomplete="off" required>
  <label class="btn btn-outline-primary quiz h-100 d-flex align-items-center" for="q7a">
    <strong style="display: inline">A:</strong> {{ post.ae }}
  </label>
</div>

内容的提问来源于stack exchange，提问作者Aristotle