Как выровнять div по горизонтали с помощью Bootstrap

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

класс col в bootstrap делает это, вам нужно добавить для него div row class, в строке, которую вы положили col div, bootstrap рассчитывает ширину соответственно в зависимости от количества cols, которые вы помещаете в row дел.

<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>

Answer 2

Вам не хватает другого внутри тега. Просто добавьте это

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