在 bootstrap 中並排顯示 ng-container 和 div 中的 2 個輸入字段

Question

賞金將在 7 天后到期。 此問題的答案有資格獲得+50聲望賞金。 哈利想提請更多人注意這個問題。

我試圖並排顯示 2 個輸入字段和一個按鈕。 嘗試了很多組合，但仍然沒有運氣。 and 的代碼塊如下。 你能幫忙看看如何讓它們並排在同一行 ide 上嗎？ 非常感謝

代碼：

<div [id]="id" class="row" style="margin: 0rem; align-items: center">
...
   <ng-container [formGroup]="igf">
   ...
     <div class="p-0">
     ...
        <div class="input-group input-group-sm">
        ...
           <ng-container>
           ...
              <input> --first
              <div class="input-group">
              ...
                <input> --second

              </div>
           </ng-container>
        </div>
     </div>
   </ng-container>
</div>

Answer 1

選項 1：無嵌套input-group

app.component.html

<div [id]="id" class="row" style="margin: 0rem; align-items: center;">
  <div class="p-0">
    <div class="input-group input-group-sm d-flex">
      <input />
      <input />
      <button type="submit">Submit</button>
    </div>
  </div>
</div>

查看現場演示。

選項 2：嵌套input-group

如果你想有一個嵌套的input-group ，那么下面的代碼就可以了。 添加style="display: inline-flex;" 到第二個input-group 。

下面的代碼也適用於<ng-container> 。 查看現場演示。

app.component.html

<div [id]="id" class="row" style="margin: 0rem; align-items: center;">
  <div class="p-0">
    <div class="input-group input-group-sm">
      <input />
      <div class="input-group" style="display: inline-flex;">
        <input />
      </div>
      <button type="submit">Submit</button>
    </div>
  </div>
</div>

查看現場演示。

Answer 2

您可以使用 Bootstrap 網格系統來實現這一點。 您可以將每個輸入字段和按鈕包裝在一個div中，並為每個字段分配一個 class 的 col- col-* ，其中 * 是您希望該元素占據的列數。 例如，如果您希望輸入字段各占行的一半，按鈕占剩余空間，您可以這樣做：

<div class="row" style="margin: 0rem; align-items: center">
    <ng-container [formGroup]="igf">
        <div class="p-0">
            <div class="input-group input-group-sm">
                <ng-container>
                    <div class="col-6">
                        <input> --first
                    </div>
                    <div class="col-6">
                        <div class="input-group">
                            <input> --second
                        </div>
                    </div>
                </ng-container>
            </div>
            <div class="col-12">
                <button class="btn btn-primary">Button</button>
            </div>
        </div>
    </ng-container>
</div>

這將使輸入字段和按鈕並排並占據整行。 您可以調整col-*值以滿足您的需要。