Bootstrap V4表格响应式问题：平板模式下右列溢出DIV父容器

嘿，我来帮你搞定这个表格溢出的麻烦！在Bootstrap 4里，默认表格在小屏幕下不会自动适配容器宽度，尤其是表格里有图片这类固定尺寸元素时，很容易撑破父容器。这里有几个实用的解决方案：

1. 用Bootstrap官方响应式容器搞定滚动 #

Bootstrap 4自带了.table-responsive类，专门解决表格响应式问题。你可以直接给父容器.fd-user-item-cart加上这个类，或者把表格单独包裹在带这个类的容器里——这样在小屏幕下表格会自动出现横向滚动条，既保留完整内容，又不会溢出父容器。

要是你只想在平板及以下屏幕（宽度≤768px）启用滚动效果，大屏幕保持正常布局，那就用table-responsive-md类，精准适配断点。

2. 让表格里的图片自适应宽度 #

你表格里的图片没加响应式属性，这也是溢出的潜在原因。给图片加上.img-fluid类，它会自动适配所在单元格的宽度，不会硬撑着超出容器范围。

修改后的完整代码示例 #

<div class="fd-user-item-cart table-responsive-md"> 
  <table class="table table-striped table-bordered"> 
    <thead> 
      <tr> 
        <th scope="col">111111111</th> 
        <th scope="col">222222222</th> 
        <th scope="col">333333333</th> 
        <th scope="col">444444444</th> 
        <th scope="col">555555555</th> 
        <th scope="col">666666666</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>1396/02/08</td> 
        <td>2</td> 
        <td>#456532</td> 
        <td><img src="images/food-mini.jpg" alt="食物缩略图" class="img-fluid"></td> 
        <td>asdasdasd</td> 
        <td>1</td> 
      </tr> 
    </tbody> 
  </table> 
</div>

额外优化小技巧 #

如果某些单元格文本过长，还可以加个CSS样式控制换行：

.table td {
  white-space: normal;
}

这样长文本会自动换行，进一步优化小屏幕下的显示体验。

内容的提问来源于stack exchange，提问作者Mostafa Norzade