如何在Bootstrap中让ng-container内的输入框与按钮并排显示

你的代码存在两个核心问题导致布局失败：一是第二个输入框被额外嵌套了一层input-group容器，打乱了横向布局的结构；二是代码中缺少按钮元素。结合你用到的Bootstrap类，提供两种可行的修改方案：

方案一：利用Bootstrap Input Group组件 #

直接将两个输入框和按钮放在同一个input-group容器内，通过flex-grow-1让输入框自动分配剩余空间：

<div [id]="id" class="row" style="margin: 0rem; align-items: center">
  <ng-container [formGroup]="igf">
    <div class="p-0">
      <!-- 用同一个input-group包裹所有控件 -->
      <div class="input-group input-group-sm">
        <!-- 第一个输入框 -->
        <input type="text" class="form-control" formControlName="firstInput" placeholder="第一个输入框">
        <!-- 第二个输入框 -->
        <input type="text" class="form-control" formControlName="secondInput" placeholder="第二个输入框">
        <!-- 按钮 -->
        <button class="btn btn-primary" type="button">提交</button>
      </div>
    </div>
  </ng-container>
</div>

方案二：使用弹性布局（Flexbox） #

如果不想依赖input-group的默认样式，直接给容器添加d-flex类强制横向排列，同时用gap-2控制控件间距：

<div [id]="id" class="row" style="margin: 0rem; align-items: center">
  <ng-container [formGroup]="igf">
    <div class="p-0 d-flex gap-2">
      <input type="text" class="form-control flex-grow-1" formControlName="firstInput" placeholder="第一个输入框">
      <input type="text" class="form-control flex-grow-1" formControlName="secondInput" placeholder="第二个输入框">
      <button class="btn btn-primary" type="button">提交</button>
    </div>
  </ng-container>
</div>

关键修改总结 #

• 移除第二个输入框外层多余的input-group容器
• 添加按钮元素并与输入框放在同一层级
• 通过flex-grow-1确保输入框自适应容器宽度
• 用gap-2（Bootstrap内置类）或自定义margin控制控件间的间隙

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