引导程序4嵌套列未堆叠

问题描述

引导和尝试一个宠物项目的新手。我的智慧到此为止。

我的理解是，如果您在小屏幕上分别放置<div class="col-sm-12 col-lg-5">和<div class="col-sm-12 col-lg-7 ">，则每行将占用一个新行（12行）。而不是大屏幕上，他们会共享一行（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"/>

中

解决方法

解决了。我错过了cols之前的内排。 本质上应该是类似于container-> row-> outer col-> inner row-> inner-cols之类的东西。我在做容器->行->外部col->内部cols