jquery - 在引导网格中动态添加子 div 不占用 div 的全宽

Question

我有一个父 div，我正在动态地向它附加更小的 div 内容。我想实现这样的目标：

父 div 代码如下：

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

我在父 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>

我希望子 div 在父 div 内彼此相邻（并排）出现。但这里的问题是关闭按钮或选择列表等控件没有占据子 div 的整个宽度。我明确添加style="width: 576px; float: left;"，以便它们占据指定的宽度。此外，当添加第一个 div 时，它不会占据整个宽度。只有当我添加两个子 div 时，它们才会看起来不错。如何避免添加显式宽度。谁能告诉我。

谢谢

标签： jqueryhtmlcssbootstrap-4

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>