Question

我有一个由两个表组成的HTML页面。在小型设备上，我希望这些表垂直堆叠。在桌面上，我希望它们彼此相邻。这是我的页面：

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <table class="table">
          <thead>
            <tr>
              <th>th is 0</th>
              <th>th is 1</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>cell is row 0, column 0</td>
              <td>cell is row 0, column 1</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-md-6">
        <table class="table">
          <thead>
            <tr>
              <th>th is 0</th>
              <th>th is 1</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>cell is row 0, column 0</td>
              <td>cell is row 0, column 1</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

我的问题是表格总是垂直对齐，即使在桌面上也是如此。我怎样才能达到预期的行为？

在小型设备和桌面上将两个表与Bootstrap网格系统对齐

0 个答案: