Bootstrap 5按钮组span无固定宽度对齐及模态框实现问询

1. 按钮组内Span元素对齐问题 #

原代码的核心问题是错误地将input-group-text嵌套在btn-group组件内，这两个组件不属于同一层级，导致对齐逻辑失效。正确的做法是用input-group作为外层容器，整合标签文本和按钮组，利用Bootstrap的内置布局规则自动实现对齐，无需设置固定宽度。同时修复原代码中perfectionMode单选框的语法错误（id属性未闭合）。

修正后的完整代码：

<div class="input-group mb-3">
  <span class="input-group-text" id="mode">
    <i class="bi bi-palette"></i> Mode
  </span>
  <div class="btn-group" role="group" aria-label="Mode options">
    <input type="radio" class="btn-check" name="modeOptions" id="artist" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="artist" onclick="displayType = 1;"
           data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true"
           title="Play and Store Notes">Artist</label>

    <input type="radio" class="btn-check" name="modeOptions" id="perfectionMode" autocomplete="off">
    <label class="btn btn-outline-primary" for="perfectionMode" onclick="displayType = 2;"
           data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true"
           title="Play along mode">Perfection</label>
  </div>
</div>

<div class="input-group">
  <span class="input-group-text" id="basic-addon1">
    <i class="bi bi-music-note-list"></i> Notation Type
  </span>
  <div class="btn-group" role="group" aria-label="Notation options">
    <input type="radio" class="btn-check" name="options" id="staffNotation" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="staffNotation" onclick="displayType = 1;">Staff Notation</label>

    <input type="radio" class="btn-check" name="options" id="abcNotation" autocomplete="off">
    <label class="btn btn-outline-primary" for="abcNotation" onclick="displayType = 2;">ABC Notation</label>

    <input type="radio" class="btn-check" name="options" id="srgNotation" autocomplete="off">
    <label class="btn btn-outline-primary" for="srgNotation" onclick="displayType = 3;">Custom Notation</label>
  </div>
</div>

关键调整点：

• 用input-group包裹input-group-text和btn-group，让Bootstrap自动处理垂直/水平对齐
• 移除多余的 ，依赖组件自带的间距规则
• 修复单选框的语法错误，保证HTML结构合法

2. Bootstrap 5简单模态框实现 #

以下是基础的模态框实现代码，包含触发按钮和完整的模态框结构：

<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#simpleModal">
  打开模态框
</button>

<!-- 模态框主体 -->
<div class="modal fade" id="simpleModal" tabindex="-1" aria-labelledby="simpleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="simpleModalLabel">提示</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        这是模态框的内容区域，可自定义文本、表单或其他元素。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>

额外说明：

• 通过data-bs-toggle="modal"和data-bs-target="#simpleModal"绑定触发按钮与模态框
• 若需通过JavaScript手动控制模态框，可使用以下代码：

// 打开模态框
const modalInstance = new bootstrap.Modal(document.getElementById('simpleModal'));
modalInstance.show();

// 关闭模态框
modalInstance.hide();

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