如何在容器（引导程序）中的另一个顶部显示一个 div？

Question

I've added this div containing a date picker and I've done it in a form, since there will be more fields later, but the first one I've added displays next to the table, instead of above. I've seen many answers to a similar question, but none applied to my situation.

This Fiddle shows it correctly.

Here's the container's piece of code:

<div class="container-fluid" id="container">
  <br>
  <div id="page" style="color:#373737">
    <div class="row justify-content-around" id="selectFieldsDiv">
      <div class="col-md-3 form-group">
        <label for="agencySelect">Choose</label>
        <select id="agencySelect" onchange="loadClientsFromSS(selectedAgency())">
          <option value=""></option>
          <option value="option1">Option1</option>
        </select>
      </div>

      <div class="col-md-3 form-group">
        <label for="clientSelect">Choose</label>
        <select id="clientSelect" onchange="loadClientTasks(selectedClient())">
          <option value="dsadads">Option1</option>
        </select>
      </div>

      <div class="col-md-3 form-group">
        <div id="addTaskBtnSpot"><button id="addTaskBtn" type="submit" class="btn btn-primary" onclick="addTaskFields()">Add task</button></div>
        <div id="cancelTaskBtnSpot"></div>
      </div>
    </div>
  </div>

  <br>
  <div id="addTaskFieldsDiv">
    <form>
      <label for="birthday">Birthday:</label>
      <input type="date" id="birthday" name="birthday">
    </form>
  </div>

  <div class="row" id="tableDiv">
    <div class="col">
      <div id="search-results" class="table-responsive">
        <div class="card" id="card">
          <table class="table table-borderless table-hover" id="dtable">
            <thead style="white-space: nowrap">
              <tr>
                <th style="width: 4%" class="text-center">Client ID</th>
                <th style="width: 4%" class="text-center">Task No</th>
                <th style="width: 25%" class="text-center">Task</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AC002</td>
                <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">1</td>
                <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">Review and approve on page recommendations</td>
              </tr>

              <tr>
                <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AC002</td>
                <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">2</td>
                <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">Review and approve content recommendations</td>
              </tr>
            </tbody>
          </table>
        </div>

        <br>
      </div>
    </div>
  </div>
</div>

Appreciate our help!

Answer 1

First of all remove the <br> and <div id="page"> because this (might) breaks the Bootstrap container>row>col layout.

<div class="container-fluid" id="container">
    <br />
    <div id="page" style="color: #373737">
        <div class="row justify-content-around" id="selectFieldsDiv">

Then because the datepicker is located within the Bootstrap container start the layout with a proper row and column to wrap the form/datepicker in like so:

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

Make sure to repeat this pattern (container>row>col) throughout the document and see if fits your needs.