Bootstrap中sm及以上宽度屏幕如何应用form-check-inline类

Bootstrap 原生没有提供带断点前缀的form-check-inline响应式变体，要实现设备宽度达到sm断点（Bootstrap默认sm断点为≥576px）及更宽尺寸时才让单选框水平排列、小屏垂直堆叠的效果，有两种常用实现方式，优先推荐无JS的纯CSS方案：

方案1：自定义响应式CSS（推荐） #

首先把现有代码里所有form-check元素上写死的form-check-inline类删掉，再添加一段自定义CSS，在sm断点的媒体查询里复刻Bootstrap原生form-check-inline的样式即可，不会有样式偏差。

修改后的HTML代码：

<div class="radio-container mb-3 container">
  <fieldset class="container">
    <legend>
      <h4>Destino</h4>
    </legend>
    <div class="input-radio">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="opcao" value="cidade" id="opcao-1">
        <label class="form-check-label" for="opcao-1">Cidade</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="opcao" value="campo" id="opcao-2">
        <label class="form-check-label" for="opcao-2">Campo</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="opcao" value="praia" id="opcao-3">
        <label class="form-check-label" for="opcao-3">Praia</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="opcao" value="montanha" id="opcao-4">
        <label class="form-check-label" for="opcao-4">Montanhas</label>
      </div>
    </div>
  </fieldset>
</div>

需要添加的自定义CSS：

/* 屏幕宽度≥576px（sm断点）时应用水平排列效果 */
@media (min-width: 576px) {
  .input-radio .form-check {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-right: 1rem;
    min-height: 1.5rem;
  }
  .input-radio .form-check .form-check-input {
    float: none;
    margin-left: 0;
    margin-right: 0.25rem;
  }
}

这个方案不需要依赖JS，性能最好，适配逻辑最稳定。

方案2：JS动态控制类名 #

如果不想写自定义CSS，也可以通过JS监听窗口尺寸变化，动态给元素添加/移除form-check-inline类：

const smBreakpoint = 576;
const formCheckItems = document.querySelectorAll('.input-radio .form-check');

const updateCheckLayout = () => {
  formCheckItems.forEach(item => {
    if (window.innerWidth >= smBreakpoint) {
      item.classList.add('form-check-inline');
    } else {
      item.classList.remove('form-check-inline');
    }
  })
}

// 页面加载完成时初始化
window.addEventListener('DOMContentLoaded', updateCheckLayout);
// 窗口尺寸变化时更新布局
window.addEventListener('resize', updateCheckLayout);

注意：如果页面元素较多，建议给resize事件添加防抖逻辑避免频繁触发重绘，整体稳定性不如纯CSS方案。

内容的提问来源于stack exchange，提问作者Murilo Rodrigues Santana