求助：如何让Bootstrap 4多按钮组输入组整体保持在同一行

我帮你搞定这个布局问题！要让输入框和带单选按钮的按钮组作为整体显示在同一行，关键是要遵循Bootstrap 4输入组的正确嵌套结构，尤其是针对单选按钮的按钮组样式。

核心问题分析 #

你原来的代码里可能用了旧的input-group-btn结构，而且单选按钮组的嵌套方式没有和输入组正确结合，导致换行。Bootstrap 4推荐使用input-group-append/input-group-prepend来附加元素，同时按钮式单选需要借助btn-group-toggle和data-toggle="buttons"来实现。

修正后的完整代码 #

<div class="container">
  <div class="col-md-6 col-lg-6">
    <div class="input-group">
      <!-- 输入框 -->
      <input type="text" class="form-control" id="input-field" name="input-field" placeholder="Enter text here">
      <!-- 附加的单选按钮组 -->
      <div class="input-group-append">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-secondary active">
            <input type="radio" name="options" id="option1" checked> Active
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" id="option2"> Radio
          </label>
          <!-- 可按需添加更多单选按钮 -->
        </div>
        <!-- 额外普通按钮（如果需要） -->
        <button class="btn btn-primary" type="button">Submit</button>
      </div>
    </div>
  </div>
</div>

关键调整点 #

• 用input-group-append替代旧的input-group-btn：这是Bootstrap 4中附加元素到输入组的标准方式，能保证元素和输入框在同一行。
• 单选按钮组嵌套：将单选按钮放在btn-group btn-group-toggle容器内，并设置data-toggle="buttons"，这样单选按钮会呈现按钮样式，且保持组内紧凑布局。
• 按钮式单选结构：每个单选按钮必须被label包裹，label添加btn btn-secondary类，选中项额外加active类，同时input的checked属性对应选中状态。

这样调整后，输入框和整个按钮组（包括单选按钮和普通按钮）就会作为一个整体完美显示在同一行啦！

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