Bootstrap 4 input-group-prepend单选框标签与单选框无法对齐问题

你遇到的对齐问题主要是因为Bootstrap 4对input-group组件的结构做了调整，和Bootstrap 3的实现逻辑不一样，另外你的代码里还有几个小细节需要修正：

你的代码存在的问题 #

• 错误使用了Bootstrap 4中不存在的类form-group-label，这会导致样式错乱；
• 单选框没有放在input-group-text容器中，Bootstrap 4需要用这个容器来承载输入框前后的附加元素（比如单选框、复选框或文本）；
• 两个单选框的name属性不一致（第一个未设置name，第二个设置为gender），这会导致它们无法实现互斥选择的功能。

正确的实现代码 #

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" name="gender" value="Mrs" checked>
      <label class="mb-0 ml-1">Mrs</label>
    </div>
  </div>
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" name="gender" value="Mr">
      <label class="mb-0 ml-1">Mr</label>
    </div>
  </div>
  <input type="text" class="form-control" name="name" placeholder="Enter your full name">
</div>

代码说明 #

1. input-group-text容器：这个类是Bootstrap 4用来替代Bootstrap 3中input-group-addon的，专门用来包裹输入框前后的附加元素，能保证元素和输入框垂直对齐；
2. 统一name属性：给两个单选框设置相同的name="gender"，这样它们就能成为一组，实现互斥选择；
3. 标签样式优化：给标签加上mb-0（消除默认外边距）和ml-1（给单选框和标签之间增加一点间距），让布局更整洁美观；
4. 正确结构层级：input-group-prepend -> input-group-text -> 单选框+标签，这个层级是Bootstrap 4规定的input-group附加元素的标准结构。

这样调整后，单选框和标签就能完美对齐，同时单选框的互斥功能也能正常工作啦~

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