如何调整Bootstrap 5 Radio-Inline组件的居中显示与间距？

需求实现方案 #

针对你的两个需求，结合Bootstrap 5内置工具类即可快速实现，无需额外自定义CSS（也可根据需求调整）：

1. 让Radio选项居中显示

• 修正Bootstrap 5偏移类：原代码里的col-md-offset-3在Bootstrap 5中已更新为offset-md-3
• 给包含form-check-inline的容器添加justify-content-center类，借助Bootstrap的flex布局工具实现水平居中

2. 增加Radio选项之间的间距

给form-check-inline所在的div添加gap-{size}类（比如gap-3），这是Bootstrap 5提供的flex子元素间距控制类，可按需选择gap-1到gap-5等不同尺寸。

另外注意：Bootstrap 5已不再使用radio-inline类，建议替换为官方推荐的form-check-label，同时补全radio输入框的完整结构。

修改后的完整代码 #

<div class="col-md-6 offset-md-3 form-container">
  <div class="row">
    <div class="col-sm-12 form-group">
      <!-- 添加justify-content-center实现居中，gap-3增加间距 -->
      <div class="form-check form-check-inline justify-content-center gap-3">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="radioGroup" value="option1">
          选项1
        </label>
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="radioGroup" value="option2">
          选项2
        </label>
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="radioGroup" value="option3">
          选项3
        </label>
      </div>
    </div>
  </div>
</div>

补充说明 #

• 若需要更自定义的间距，也可以给每个form-check-label添加me-{size}类（比如me-4），控制右侧外边距
• justify-content-center作用于flex容器，Bootstrap的form-check-inline默认是flex布局，直接添加即可生效

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