如何在一行上放置：两个标签和两个下拉列表？

Question

事实上，我有 2 个下拉列表，我想将这 2 个元素放在一行上。

img1

img2

我迷失了 Bootstrap。你能帮帮我吗？

这是复制品 -> link。

<div class="home-content">
   <div class="container">
      <h1 class="text-center pb-3">Title</h1>
      <div class="row pt-3 container">
         <div class="card" style="width: 100%">
            <div class="card-body">
               <div class="row row-cols-3 pt-3">
                  <div class="col text-end">
                     <label for="type" class="form-label">Type</label>
                  </div>
                  <div class="col-4">
                     <select
                     class="form-select"
                     style="max-width: 100px"
                     [ngModel]="selectedType"
                     (ngModelChange)="onChangeType($event)"
                     >
                     <option [value]="''">TOUS</option>
                     <option [value]="'IN'">IN</option>
                     <option [value]="'OUT'">OUT</option>
                     </select>
                     <div class="col text-end">
                        <label for="type" class="form-label">Status</label>
                     </div>
                     <div class="col-4"></div>
                     <select
                     class="form-select"
                     style="max-width: 100px"
                     [ngModel]="selectedStatut"
                     (ngModelChange)="onChangeStatut($event)"
                     >
                     <option [value]="''">TOUS</option>
                     <option [value]="'1'">ENCODE</option>
                     <option [value]="'8'">ANNULE</option>
                     <option [value]="'9'">FAIT</option>
                     </select>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

感谢您的帮助。

Answer 1

将此代码粘贴到您的 card-body 容器中：

<div class="row">
  <div class="col-auto">
    <label for="type" class="col-form-label">Type</label>
  </div>
  <select class="form-select" style="max-width: 100px" [ngModel]="selectedType" (ngModelChange)="onChangeType($event)">
    <option [value]="''">TOUS</option>
    <option [value]="'IN'">IN</option>
    <option [value]="'OUT'">OUT</option>
  </select>
  <div class="col-auto">
    <label for="status" class="col-form-label">Status</label>
  </div>
  <select class="form-select" style="max-width: 100px" [ngModel]="selectedStatut"
    (ngModelChange)="onChangeStatut($event)">
    <option [value]="''">TOUS</option>
    <option [value]="'1'">ENCODE</option>
    <option [value]="'8'">ANNULE</option>
    <option [value]="'9'">FAIT</option>
  </select>
</div>

如何在一行上放置：两个标签和两个下拉列表？

How to place on one line: two labels and two drop-down lists?

bootstrap-5