css - Bootstrap 4 Alpha Grid 无法并排放置 2 个表格

Question

在使用 Bootstrap 4 时，我知道 .col-xs 被删除了，而不是 .col，我已经在我正在使用的 bootstrap 3.5 上进行了测试

    <div class="col-xs-4">
         Table left side goes here
     </div>
    <div class="col-xs-8">
         Table right side goes here
    </div>

它工作正常，正如您从 here 中看到的那样.

然而，它在 Bootstrap 4 Alpha 上有点不同。

<div class="col-2">
    <h2 class="sub-header">Test Arear</h2>
    <div class="table-responsive">
        <table class="table table-striped">
            <tbody>
                <tr>
                    <td class="col-md-1">Test</td>
                </tr>
                <tr>
                    <td class="col-md-1">Test 2</td>
                </tr>
                <tr>
                    <td class="col-md-1">Test 3</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="col-10">
    <h2 class="sub-header">Ticket Number</h2>
    <div class="table-responsive">
        <table class="table table-striped">
            <tbody>
                <tr>
                    <td class="col-md-1">1,001</td>
                    <td class="col-md-2">1,002</td>
                    <td class="col-md-3">1,003</td>
                </tr>
                <tr>
                    <td class="col-md-1">1,004</td>
                    <td class="col-md-2">1,005</td>
                    <td class="col-md-3">1,006</td>
                </tr>
                <tr>
                    <td class="col-md-1">1,002</td>
                    <td class="col-md-2">1,021</td>
                    <td class="col-md-3">1,023</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

如您所见 here 的结果.

我想把它放在并排的 table 上，但它不是并排的。我错过了什么吗？

Answer 1

您需要一个行包装器，因为 Bootstrap 4 是在 flex 而不是 float 上完成的，因此现在需要包装列以使其成为列

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet"/>
<div class="row">
  <div class="col-2">
    <h2 class="sub-header">Test Arear</h2>
    <div class="table-responsive">
      <table class="table table-striped">
        <tbody>
          <tr>
            <td class="col-md-1">Test</td>
          </tr>
          <tr>
            <td class="col-md-1">Test 2</td>
          </tr>
          <tr>
            <td class="col-md-1">Test 3</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="col-10">
    <h2 class="sub-header">Ticket Number</h2>
    <div class="table-responsive">
      <table class="table table-striped">
        <tbody>
          <tr>
            <td class="col-md-1">1,001</td>
            <td class="col-md-2">1,002</td>
            <td class="col-md-3">1,003</td>
          </tr>
          <tr>
            <td class="col-md-1">1,004</td>
            <td class="col-md-2">1,005</td>
            <td class="col-md-3">1,006</td>
          </tr>
          <tr>
            <td class="col-md-1">1,002</td>
            <td class="col-md-2">1,021</td>
            <td class="col-md-3">1,023</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Example Bootply