Bootstrap 4 .table-responsive class 不会占用 100% 宽度

Question

我有 2 个 table 具有相同的 HTML 并且都声明为：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <div class="card">
        <div class="card-body">
          <table class="table table-sm table-hover table-responsive">
              <thead>
                  <tr>
                      <th>Item 01</th>
                      <th>Item 02</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>Item 01</td>
                      <td>Item 02</td>
                  </tr>
              </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

这就是我在屏幕上看到的：

使用相同 HTML 声明的第二个和连续 table 在 thead 和 tbody 上未获得 100% 宽度... 这里有什么问题？

更新：

我的第一个 table 因为最后一行的内容而工作，它足够长以使其 100% 适合我的卡 div。

实际上it's a issue on Bootstrap 4，所以这个问题的-2 信誉是无效的。谢谢。

Answer 1

发现是Bootstrap V4上的问题，在这个issue可以看到，而我的第一个table是不行的，就是里面的内容最后一行的长度足以填满 table 宽度，因此看起来可以正常工作。

编辑：通过添加 class table-responsive 作为 的父 div 来修复table, here is the ship list for the fix and the issue that reported the bug.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <div class="card">
        <div class="card-body">
          <div class="table-responsive">  
            <table class="table table-sm table-hover">
                <thead>
                    <tr>
                        <th>Item 01</th>
                        <th>Item 02</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Item 01</td>
                        <td>Item 02</td>
                    </tr>
                </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap 4 .table-responsive class 不会占用 100% 宽度

Bootstrap 4 .table-responsive class won't take 100% width

html

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4