bootstrap 4嵌套列不堆叠

Question

新手引导和试验宠物项目。我有点不知所措到此为止。

我的理解是，如果您在小屏幕上有 <div class="col-sm-12 col-lg-5"> 和 <div class="col-sm-12 col-lg-7 ">，每个都会占用一个新行（12 列）。 vs 在大屏幕上，他们会共享行 (5+7)。在我的代码中，第二个表（水果）应该与大屏幕上的图表共享行并在小屏幕上拆分，但是当我在调试模式下尝试小屏幕时，图表的第二列被推出父列（关闭屏幕）。我不知道这里到底出了什么问题。任何帮助，将不胜感激 下面是部分代码

  <div class="container">
<div class="row">
  <div class="media content-section col-sm-12 col-md-12 col-lg-12">
    <form action="" method="post">
      {% csrf_token %}
      <label class="switch"
        ><input type="checkbox" id="togBtn" />
        <div class="slider round">
          <!--ADDED HTML --><span class="on">BUY</span
          ><span class="off">SELL</span
          ><!--END-->
        </div></label
      >
      <div class="table-responsive-md">
        <table class="table table-sm table-bordered tableformat">
          <thead>
            SUMMARY
            <small class="text-muted"
              >(edit cells to adjust position)</small
            >
            <tr>
              <th scope="col">col 1</th>
              <th scope="col">col 2</th>
              <th scope="col">col 3</th>
              <th scope="col">col 4</th>
              <th scope="col">col 5</th>
              <th scope="col">col 6</th>
              <th scope="col">col 7</th>
              <th scope="col">col 8</th>
              <th scope="col">col 9</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>0</td>
              <td width="60">
                <input
                  type="text"
                  maxlength="10"
                  width="50%"
                  placeholder="1"
                  size="10"
                />
              </td>
              <td width="60">
                <input
                  type="text"
                  maxlength="10"
                  width="50%"
                  size="10"
                  placeholder="2"
                />
              </td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td>6</td>
              <td>7</td>
              <td>8</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="row">
        <div class="col-md">
          <button
            type="button"
            class="btn btn-primary btn-sm"
            type="submit"
          >
            update position
          </button>
          <button
            type="button"
            class="btn btn-primary btn-sm"
            type="submit"
          >
            reset to default
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="row">
  <div class="media content-section col-sm-12-col-md-12 col-lg-12">
    <div class="col-sm-12 col-lg-5">
      <div class="table-responsive-md">
        <table
          class="table table-sm table-bordered tableformat text-center"
        >
          <thead>
            fruits
            <small class="text-muted"
              >(hover on terms for quick definitions)</small
            >
            <tr>
              <th scope="col">mango</th>
              <th scope="col">banana</th>
              <th scope="col">apple</th>
              <th scope="col">peach</th>
              <th scope="col">grapes</th>
              <th scope="col">lemon</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td>6</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="chart col-sm-12 col-lg-7 overflow-auto">
      <div style="width: 560; height: 400;">
        <canvas id="plchart"></canvas>
      </div>
    </div>
  </div>
</div>

这是large screen 与small screen 在调试模式下的外观。我在元标记中有<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

Answer 1

解决了。我错过了cols之前的内排。 本质上应该类似于容器-> 行-> 外列-> 内行-> 内列。我在做容器->行->外列->内列