Question

我试图将3张桌子放在某个位置（如图中所示），但我不能。板子一个放在另一个下。

我需要在一侧放置两个，在另一侧放置3 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>

非常感谢您的时间和帮助。问候

Answer 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"中。同样，您的div和class="row"似乎只有一个表。

Answer 2

您可以尝试以下操作。

查看更新的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 个答案: