Bootstrap容器中如何让div正确显示在另一个div上方

问题根因 #

错位由Bootstrap栅格的浮动机制导致：顶部选择栏所在的.row容器内的列默认带浮动属性，行容器未对后续相邻元素做浮动清除，导致后续的日期表单、表格区域被浮动挤压，跑到侧边显示。

修复方案 #

• 按照Bootstrap栅格规范，给日期选择器所在的#addTaskFieldsDiv外层包裹标准的行+全宽列结构，强制该区域占满整行、清除上方浮动影响
• 替换原代码中#addTaskFieldsDiv相关片段为以下内容：

<br>
<div class="row">
  <div class="col-12" id="addTaskFieldsDiv">
    <form>
      <label for="birthday">Birthday:</label>
      <input type="date" id="birthday" name="birthday">
    </form>
  </div>
</div>

• 后续新增表单字段直接写入id="addTaskFieldsDiv"的容器内即可，所有字段都会保持整行排布，不会再出现侧边错位问题。

修复效果 #

日期选择器表单会正常显示在表格上方，表格区域回归全宽正常位置，不再偏移到页面右侧。

内容的提问来源于stack exchange，提问作者onit