Bootstrap div在窗口調整大小上重疊

Question

在引導程序中，當在引導程序中調整窗口大小時，兩個div彼此重疊。 我正在使用角度作為表中的數據點，請參見預覽： https : //plnkr.co/edit/VKgh1su6HIueDhzWq497?p= preview

<div class="container">
    <div class="row">
        <div class="col-sm-3">
<!--      <h3></h3>-->
            <!-- <table class="table"  border ="1" cellpadding="0" cellspacing="0" style="height:100%;" -->
            <table class="table"  border ="1"  >
                <thead>
                    <tr>
                        <th colspan="2" >
                          &nbsp;   &nbsp;  &nbsp;   Checker Statistics
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>
                               <br> Period
                        </td>    
                        <th>
                            <ul>
                                <li>Yesterday</li>
                                <li>Today</li>
                                <li>This week</li>
                                <li>This month</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <th>
                                From
                        </th>
                        <td>
                                <input type="text" name="">
                        </td>
                    </tr>
                    <tr>
                        <th>
                                To
                        </th>
                        <td>
                                <input type="text" name="">
                        </td>
                    </tr>
                     <tr>
                        <th colspan="2">
                                Filter Out Tests
                                &nbsp;
                                &nbsp;
                                 <input type="checkbox" class="custom-control-input">
                                 <span class="custom-control-indicator"></span>

                           <!--      <input type="checkbox" class="hidden" /> -->
                                </span> 
                        </th>
                    </tr>
                     <tr>
                        <th colspan="2">
                                Compare Tests
                                &nbsp;
                                &nbsp;
                                <input type="checkbox" class="custom-control-input">
                                 <span class="custom-control-indicator"></span>
                        </th>
                    </tr> 
                    <tr>

                    </tr>
                      <tr>

                    </tr>

                      <tr>

                    </tr>



                </tbody>
            </table>
<!--      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>-->
        </div>


        <div class="col-sm-9">

             <div class="table-responsive"  >      
              <h4 align ="center">Site Data</h4>
                    <table class="table" border ="1">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Site</th>
                        <th>Jobs</th>
                        <th>Success</th>
                        <th>Failed</th>
                        <!-- <th ng-bind="test"></th> -->
                      </tr>
                    </thead>
                    <tbody>
                       <tr ng-repeat="siteData in data">
                        <td>{{siteData.site}}</td>
                        <td>{{siteData.site}}</td>
                        <td>{{siteData.Jobs}}</td>
                        <td>{{siteData.Success}}</td>
                        <td>{{siteData.Failure}}</td>
                      </tr>
                    </tbody>
                  </table>
            </div>
        </div>
    </div>
</div>

Answer 1

你可以試試這個

您忘記了對第一個表使用表響應 div。

HTML：

<div class="container">
<div class="row">
  <div class="col-sm-3">
    <div class="table-responsive">
      <table class="table" border="1">
        <thead>
          <tr>
            <th colspan="2">
              &nbsp; &nbsp; &nbsp; Checker Statistics
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>
              <br> Period
              </td>
              <th>
                <ul>
                  <li>Yesterday</li>
                  <li>Today</li>
                  <li>This week</li>
                  <li>This month</li>
                </ul>
                </td>
          </tr>
          <tr>
            <th>
              From
            </th>
            <td>
              <input type="text" name="">
            </td>
          </tr>
          <tr>
            <th>
              To
            </th>
            <td>
              <input type="text" name="">
            </td>
          </tr>
          <tr>
            <th colspan="2">
              Filter Out Tests &nbsp; &nbsp;
              <input type="checkbox" class="custom-control-input">
              <span class="custom-control-indicator"></span>
              </span>
            </th>
          </tr>
          <tr>
            <th colspan="2">
              Compare Tests &nbsp; &nbsp;
              <input type="checkbox" class="custom-control-input">
              <span class="custom-control-indicator"></span>
            </th>
          </tr>
          <tr>
          </tr>
          <tr>
          </tr>
          <tr>
          </tr>
        </tbody>
      </table>
    </div>
  </div>


  <div class="col-sm-9">

    <div class="table-responsive">
      <h4 align="center">Site Data</h4>
      <table class="table" border="1">
        <thead>
          <tr>
            <th>#</th>
            <th>Site</th>
            <th>Jobs</th>
            <th>Success</th>
            <th>Failed</th>
            <!-- <th ng-bind="test"></th> -->
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="siteData in data">
            <td>{{siteData.site}}</td>
            <td>{{siteData.site}}</td>
            <td>{{siteData.Jobs}}</td>
            <td>{{siteData.Success}}</td>
            <td>{{siteData.Failure}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

然后它將起作用... :)

Answer 2

就像在第二張表中所做的那樣，在<div class="table-responsive"></div>包含第一張表

Answer 3

在小（ sm ）屏幕中，第一個表無法容納容器面積的四分之一。

您可以將col-sm-3和col-sm-9更改為col-md-3和col-md-9 ，這樣，這些表將僅在中等（ md ）屏幕或更寬的屏幕中彼此md布置。