динамически добавленный sub div в сетке bootstrap, не занимающий всю ширину div

Question

У меня есть родительский div, и я динамически добавляю к нему меньшие div с содержимым. Я хочу добиться чего-то вроде этого:

Код родительского элемента выглядит следующим образом:

<div class="row" style="float: left;">
    <div class="col-lg-12 col-md-12" id="parent">
    </div>
</div>

Элемент sub div, который Я добавляю внутри родительского div, как показано ниже:

<div class="col-lg-4 col-md-12" style="margin-top: 20px; padding: 10px; float: left;">
   <fieldset class="border p-2">
      <legend class="w-auto">Box</legend>
      <div style="width: 576px; float: left;">
         <button class="btn"><i class="fa fa-close"></i></button>
      </div>
      <label for="student">Student</label>
      <span style="width: 576px;">
         <select style="width: 100%;" id="student" class="form-control select2 w-100">
            <option value="">Select Student</option>
            <option value="1">Student1</option>
         </select>
      </span>
   </fieldset>
</div>

Я хочу, чтобы sub div отображались рядом друг с другом (рядом) внутри родительского div. Но проблема здесь в том, что элементы управления, такие как Кнопка закрытия или список выбора не занимают всю ширину субдива. Я явно добавил style="width: 576px; float: left;", чтобы они заняли указанную ширину. Кроме того, когда добавляется первый div, он не занимает всю ширину. Только когда я добавляю два sub div, они выглядят хорошо. Как мне избежать добавления явной ширины. Может ли кто-нибудь, пожалуйста, дайте мне знать.

Спасибо

Answer 1

Я обновил код, чтобы он соответствовал вашему изображению. Это вам подходит? Добавлен цвет красный для отображения раздела col-md-12.

Обновление кода:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row col-md-12" style="background-color: red; padding-top: 20px; padding-bottom:20px;">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">col-md-4</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">col-md-4</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">col-md-4</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor.</p>
      </div>
    </div>
  </div>
</div>