时间戳

首页 > 解决方案 > Bootstrap：将两个表放在一个 boostrap 列中

html - Bootstrap：将两个表放在一个 boostrap 列中

问题描述

我有 3 个表：2 个较短的表应该在左侧占据 3 个引导列，1 个更长更大的表应该在右侧占据 9 个列。下面是代码，两个较小的表都出现在一行上，而较大的表在下面。

body {
  padding: 3%;
}
<!DOCTYPE html>

<head>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div id="left-side-top" class="col-3">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Left top</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <div id="left-side-bottom" class="col-3">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Left bottom</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <div id="right-side" class="col-9">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class='thead-dark'>
              <tr>
                <th>Longer table header</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>


  <script src="https://d3js.org/d3.v5.min.js"></script>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
</body>

它应该如下所示：

在此处输入图像描述

如何编辑我的布局？我正在使用Bootstrap 4.5

标签： htmlcssbootstrap-4

解决方案

<!DOCTYPE html>

<html>
<head>
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div id="left-side-top" class="col-3">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class="thead-dark">
              <tr>
                <th>Left top</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="left-side-bottom">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class="thead-dark">
              <tr>
                <th>Left bottom</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      </div>



      <div id="right-side" class="col-9">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-fit">
            <thead class="thead-dark">
              <tr>
                <th>Longer table header</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
               <tr>
                <td>Data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>


  <script src="https://d3js.org/d3.v5.min.js"></script>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
</body></html>

我改变了你的 div 的位置。我希望它有帮助....

推荐阅读