分享
三行代码  ›  专栏  ›  技术社区  ›  Steven

引导表未正确排序

  •  0
  • Steven  · 技术社区  · 1 周前

    我试着把三张桌子放在一个特定的位置(如图中所示),但我做不到。这些板是一个一个放在另一个下面的。

    Image 你知道怎么做吗?我试了很多东西,但还是想不出来

    我的代码:

    谢谢你

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <div class="row">
      <div class="table-responsive col-md-6">
        <h2 class="sub-header">Subtitle</h2>
        <div class="table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th class="col-md-1">#</th>
                <th class="col-md-2">Header</th>
    
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="col-md-1">1,001</td>
                <td class="col-md-2">1,001</td>
              </tr>
              <tr>
                <td class="col-md-1">1,001</td>
                <td class="col-md-2">1,001</td>
              </tr>
              <tr>
                <td class="col-md-1">1,001</td>
                <td class="col-md-2">1,001</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="table-responsive col-md-6">
      <h2 class="sub-header">Subtitle</h2>
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th class="col-md-1">#</th>
              <th class="col-md-2">Header</th>
    
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="col-md-1">1,001</td>
              <td class="col-md-2">1,001</td>
    
            </tr>
            <tr>
              <td class="col-md-1">1,001</td>
              <td class="col-md-2">1,001</td>
    
            </tr>
            <tr>
              <td class="col-md-1">1,001</td>
              <td class="col-md-2">1,001</td>
    
            </tr>
          </tbody>
        </table>
        <!-- Bootstrap core JavaScript -->
      </div>
    </div>
    <div class="table-responsive col-md-6">
      <h2 class="sub-header">Subtitle</h2>
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th class="col-md-1">#</th>
              <th class="col-md-2">Header</th>
    
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="col-md-1">1,001</td>
              <td class="col-md-2">1,001</td>
            </tr>
            <tr>
              <td class="col-md-1">1,001</td>
              <td class="col-md-2">1,001</td>
            </tr>
            <tr>
              <td class="col-md-1">1,001</td>
              <td class="col-md-2">1,001</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    </div>
    </div>

    非常感谢你的时间和帮助。 当做

    2 回复  |  直到 1 周前
        1
  •  0
  •   Brian    1 周前

    你可以试试下面的方法。

    查看更新的HTML

    <div class="row">
        <div class="col-md-6">
        <h2 class="sub-header">Subtitle</h2>
              <div class="table-responsive">
                   <table class="table table-striped">
                     <thead>
                       <tr>
                         <th class="col-md-1">#</th>
                         <th class="col-md-2">Header</th>
    
                       </tr>
                     </thead>
                     <tbody>
                       <tr>
                         <td class="col-md-1">1,001</td>
                         <td class="col-md-2">1,001</td>
                       </tr>
                       <tr>
                         <td class="col-md-1">1,001</td>
                         <td class="col-md-2">1,001</td>
                       </tr>
                        <tr>
                         <td class="col-md-1">1,001</td>
                         <td class="col-md-2">1,001</td>
                       </tr>
                     </tbody>
                   </table>
                 </div>
         
    
        <h2 class="sub-header">Subtitle</h2>
              <div class="table-responsive">
                   <table class="table table-striped">
                     <thead>
                       <tr>
                         <th class="col-md-1">#</th>
                         <th class="col-md-2">Header</th>
    
                       </tr>
                     </thead>
                     <tbody>
                       <tr>
                         <td class="col-md-1">1,001</td>
                         <td class="col-md-2">1,001</td>
    
                       </tr>
                       <tr>
                         <td class="col-md-1">1,001</td>
                         <td class="col-md-2">1,001</td>
    
                       </tr>
                        <tr>
                         <td class="col-md-1">1,001</td>
                         <td class="col-md-2">1,001</td>
    
                       </tr>
                     </tbody>
                   </table><!-- Bootstrap core JavaScript -->
                 </div>
    </div><!--/COL6-->
    <div class="col-md-6">
        <h2 class="sub-header">Subtitle</h2>
              <div class="table-responsive">
                   <table class="table table-striped">
                     <thead>
                       <tr>
                         <th class="col-md-1">#</th>
                         <th class="col-md-2">Header</th>
    
                       </tr>
                     </thead>
                     <tbody>
                       <tr>
                         <td class="col-md-1">1,001</td>
                         <td class="col-md-2">1,001</td>
                       </tr>
                       <tr>
                         <td class="col-md-1">1,001</td>
                         <td class="col-md-2">1,001</td>
                       </tr>
                        <tr>
                         <td class="col-md-1">1,001</td>
                         <td class="col-md-2">1,001</td>
                       </tr>
                     </tbody>
                   </table>
                 </div>
    </div><!--/COL6-->
    </div><!--/ROW-->
    

    我还对结束div(列)添加了注释。

        2
  •  0
  •   lime    1 周前

    试试下面的方法,它应该是你想要的:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <div class="container">
          <div class="row">
            <div class="table-responsive col-md-4">
              <h2 class="sub-header">Subtitle</h2>
              <div class="table-responsive">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th class="col-md-1">#</th>
                      <th class="col-md-2">Header</th>
    
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="col-md-1">1,001</td>
                      <td class="col-md-2">1,001</td>
                    </tr>
                    <tr>
                      <td class="col-md-1">1,001</td>
                      <td class="col-md-2">1,001</td>
                    </tr>
                    <tr>
                      <td class="col-md-1">1,001</td>
                      <td class="col-md-2">1,001</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="table-responsive col-md-4">
              <h2 class="sub-header">Subtitle</h2>
              <div class="table-responsive">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th class="col-md-1">#</th>
                      <th class="col-md-2">Header</th>
    
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="col-md-1">1,001</td>
                      <td class="col-md-2">1,001</td>
    
                    </tr>
                    <tr>
                      <td class="col-md-1">1,001</td>
                      <td class="col-md-2">1,001</td>
    
                    </tr>
                    <tr>
                      <td class="col-md-1">1,001</td>
                      <td class="col-md-2">1,001</td>
    
                    </tr>
                  </tbody>
                </table>
                <!-- Bootstrap core JavaScript -->
              </div>
            </div>
            <div class="table-responsive col-md-4">
              <h2 class="sub-header">Subtitle</h2>
              <div class="table-responsive">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th class="col-md-1">#</th>
                      <th class="col-md-2">Header</th>
    
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="col-md-1">1,001</td>
                      <td class="col-md-2">1,001</td>
                    </tr>
                    <tr>
                      <td class="col-md-1">1,001</td>
                      <td class="col-md-2">1,001</td>
                    </tr>
                    <tr>
                      <td class="col-md-1">1,001</td>
                      <td class="col-md-2">1,001</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
    

    我把所有的东西都放在一个额外的 div class="container" 迪夫 具有 class="row" 只有第一张桌子。