如何使用Bootstrap在一行中水平對齊div

Question

我試圖將頁面分為兩個部分，即6 + 6列，並在每個部分中水平放置3個div。 超過3的格線對齊在頁面同一部分的底部行中。

我正在嘗試，但仍然無法正確對齊。 這是我的代碼。 我怎樣才能做到這一點？

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="row" id="meta-search"> <div class="col-sm-6"> <h5> IDs </h5> <form action="" method="post"> <div class="col-sm-2 mb-3"> <label>ID1</label> <input type="number" class="form-control"> </div> <div class="col-sm-2 mb-3"> <label>ID2</label> <input type="number" class="form-control"> </div> <div class="col-sm-2 mb-3"> <label>ID3</label> <input type="number" class="form-control"> </div> <button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button> </form> </div> </div> 

Answer 1

您在標記內丟失了另一個。 只需添加此

  <form action="" method="post"> 
   <div class="row">

Answer 2

bootstrap中的col類可以做到這一點，您需要為其添加一個row類div，在您將col div放入該行的內部，bootstrap根據您在row div中放置的cols的數量相應地計算寬度。

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="row" id="meta-search"> <div class="col-sm-6"> <h5> IDs </h5> <form action="" method="post"> <div class="row"> <div class="col mb-3"> <label>ID1</label> <input type="number" class="form-control"> </div> <div class="col mb-3"> <label>ID2</label> <input type="number" class="form-control"> </div> <div class="col mb-3"> <label>ID3</label> <input type="number" class="form-control"> </div> </div> <button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button> </form> </div> </div>