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的结果。

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

Answer 1

你需要一个行包装器，因为bootstrap 4是在flex而不是浮动上完成的，因此现在需要将列包装起来以使它们成为列

＆＃13;

<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>

＆＃13;

Example Bootply

Bootstrap 4 Alpha Grid并排放置2张桌子

1 个答案: