Bootstrap div重叠在窗口调整大小

Question

在bootstrap中，当在引导程序中调整窗口大小时，两个div都相互重叠。我在表中使用angular作为数据点 查看预览：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，这样表格将仅以中等方式排列在彼此旁边（{{1}屏幕和更宽。