如何防止Bootstrap 4表响应溢出它的父

Question

我尝试使用Bootstrap 4 table table-responsive类来获取表格以显示水平滚动条，这样当表格的宽度较大时，它不会溢出它的父容器

然而，问题是它溢出了它的父容器并且根本没有显示滚动条。

table-layout:fixed;不是解决方案，因为它修复了表格的宽度而不是使其可滚动

＆＃13;

＆＃13;

body {
  background: #999;
  color: white;
  width: 100%;
}

.parent {
  display: flex;
  background: #333;
  width: 100%;
}

.div-with-table {
  flex: 1 1 auto;
}

＆＃13;

<div class="parent">
  <div class="div-with-table">
    <table class="table table-responsive">
      <tr>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
      </tr>
      <tr>
        <td>
          xxxxx
        </td>
        <td>
          xxxxx
        </td>
        <td>
          xxxx
        </td>
        <td>
          xxxx xxxx
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
      </tr>
      <tr>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
        <td>
          x
        </td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://codepen.io/simPod/pen/PJPBEZ

我做错了什么？

Answer 1

添加此规则怎么样：

.parent { overflow-x: scroll; }

Answer 2

你可以这样做：

.parent {
  width: 200px;
  display: flex;
  background: #333;
  overflow-x: auto; 
  }

或：

   .parent {
  width: 200px;
  display: flex;
  background: #333;
  overflow-x: scroll; 
  }

或简单地说：

  .parent {
  width: 200px;
  display: flex;
  background: #333;
  overflow: auto; 
  } 

Answer 3

这是Popper.js中的一个错误，我们已经here对其进行了文档记录，现在将其记录在docs中。

您只需要将Padding(3)更改为boundary以外的其他内容

scrollParent