Bootstrap 4 .表响应类不会占用100%宽度

33qvvth1 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(1)|浏览(163)

我得到了2个具有相同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>

这是我在屏幕上看到的

第二个表和连续的表在thead和tbody上没有得到100%的宽度......这里出了什么问题？
最新消息：
我的第一个表是工作的，因为最后一行的内容，它足够长，使它适合100%对我的卡div。
实际上是it's a issue on Bootstrap 4，所以这个问题上的-2声望无效。谢谢。

twitter-bootstrap

来源：https://stackoverflow.com/questions/47159748/bootstrap-4-table-responsive-class-wont-take-100-width

1条答案

按热度按时间

qxsslcnc1#

发现这是Bootstrap V4上的一个问题，你可以在这个issue中看到，我的第一个表不工作，它只是最后一行的内容，这是足够长的表宽度，所以它看起来工作。
编辑：通过添加类 table-responsive 作为 table、here is the ship list for the fix和the issue that reported the bug的父div，修复了该问题。

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

赞(0）回复(0）举报 2022-12-08

我来回答

Bootstrap 4 .表响应类不会占用100%宽度

1条答案

相关问题

热门标签

最新问答