Bootstrap 4 如何实现多个单选按钮同行排列？

嘿，我来帮你搞定这个问题！在Bootstrap 4里要让单选按钮同行排列，核心是用form-check-inline类替换默认的form-check，这样就能把单选按钮横向排布了。

结合你已经写的表单代码，我给你补全并调整了单选按钮部分的实现，直接用下面的代码就行：

<div class="container">
  <form>
    <!-- 已有的Email输入框部分 -->
    <div class="form-group row">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>

    <!-- 同行排列的单选按钮组 -->
    <div class="form-group row">
      <label class="col-sm-2 col-form-label">偏好设置</label>
      <div class="col-sm-10">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="preference" id="option1" value="option1" checked>
          <label class="form-check-label" for="option1">选项一</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="preference" id="option2" value="option2">
          <label class="form-check-label" for="option2">选项二</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="preference" id="option3" value="option3">
          <label class="form-check-label" for="option3">选项三</label>
        </div>
      </div>
    </div>
  </form>
</div>

关键要点说明： #

• 给每个单选按钮的容器加上form-check-inline类，这是Bootstrap 4专门用来实现横向排列表单控件的类；
• 同一组的单选按钮必须保持name属性一致，这样才能确保是互斥选择；
• 整体结构还是沿用你之前的form-group row布局，标签放在col-sm-2，单选按钮组放在col-sm-10，保持和Email输入框的布局一致性。

这样调整后，你的单选按钮就会整齐地在同一行显示啦！

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