如何使用 Bootstrap 4 均勻分布表單域？

Question

我一直試圖讓這些字段分布得更均勻，但我還沒有做到：

當前的

期待

這是一塊：

<div class="row flex-nowrap d-flex align-items-center">
  <div style="width: 37%" class="form-group col-sm col-md-3"><select class="form-control" id="taskList" placeholder="Pick a task">
      <option value=""></option>
      <option value="review and approve on page recommendations">Review and approve</option>
      <option value="review and approve technical seo recommendations">Review</option>
    </select></div>
  <div style="width: 15%" class="form-group col-sm col-md-2"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div>
  <div style="width: 10%" class="form-group col-sm col-md-2"><input type="link" class="form-control" placeholder="Paste a link"></div>
  <div style="width: 32%" class="form-group col-sm col-md-3"><input type="text" class="form-control" placeholder="Notes"></div>
  <div style="width: 7%" class="form-group col-sm col-md-1"><button id="addTask" type="submit" onclick="addTaskToDb()">+</button></div>
</div>

這是小提琴

Answer 1

您需要從每列中刪除style: width: xx% ，然后將 class col-md-x設置為每列以使其總和為 12，因此在這種情況下，我使用 4 + 2 + 2 + 3 + 1，更改根據您的需要

我使用col-sm進行演示

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="row flex-nowrap d-flex align-items-center"> <div class="form-group col-sm-4"> <select class="form-control" id="taskList" placeholder="Pick a task"> <option value=""></option> <option value="review and approve on page recommendations">Review and approve</option> <option value="review and approve technical seo recommendations">Review</option> </select> </div> <div class="form-group col-sm-2"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div> <div class="form-group col-sm-2"><input type="link" class="form-control" placeholder="Paste a link"></div> <div class="form-group col-sm-3"><input type="text" class="form-control" placeholder="Notes"></div> <div class="form-group col-sm-1"><button id="addTask" type="submit" onclick="addTaskToDb()">+</button></div> </div>