移动视图中的 Bootstrap v4.0.0-alpha.3 表回流问题答案

【问题标题】：Bootstrap v4.0.0-alpha.3 table-reflow issue in mobile view移动视图中的 Bootstrap v4.0.0-alpha.3 表回流问题
【发布时间】：2016-09-18 10:49:11
【问题描述】：

我在移动视图中尝试以下代码无法修复移动视图中的表格重排问题。任何建议都会很受欢迎

See image here

在CODEPEN查看代码

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <table class="table table-reflow">
        <thead>
          <tr>
            <th>Id</th>
            <th>Employee Name</th>
            <th>Salary</th>
            <th>Bonus</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr scope="row">
            <td>665</td>
            <td>Amit Shah</td>
            <td>10000</td>
            <td>1000</td>
            <td>11000</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

【问题讨论】：

codepen 是否已更新以显示解决方案？我无法弄清楚最初的问题是什么？

标签： html css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

【解决方案1】：

我有使用媒体查询的解决方案。希望它可以帮助你。检查CODEPLY链接

CSS：

@media (max-width: 544px) {
  .table-reflow thead,
  .table-reflow thead tr,
  .table-reflow tbody tr {
    width: 100%;
  }
}

【讨论】：

【解决方案2】：

这似乎是 BS4 alpha 中的一个已知问题： https://github.com/twbs/bootstrap/issues/20510

一种解决方法是为表格设置固定宽度以防止其换行。

http://www.codeply.com/go/WX8ByNRqMy

【讨论】：

我不希望卷轴进来，但感谢您的回复 :)
如果你不想滚动，就不要在它周围使用table-responsive