Bootstrap 4 卡在包装表格时响应太快

如何解决Bootstrap 4 卡在包装表格时响应太快

如果我将一张卡片包裹在一张桌子周围并将页面缩小到手机大小，以便桌子强制水平滚动条查看所有内容，那么响应式卡片会忽略表格大小（基本上是最小宽度）并调整为适合窗口，这样卡片就会小于它应该包含的桌子。

如何强制卡片始终环绕在桌子上？

下面的示例 - 在手机尺寸较小时，卡片的右边缘穿过列/单词“注释”的中间

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
      <div class="card ">
        <table class="table">
          <thead class="thead">
            <tr class="atr">
              <th class="ath" >Name</th>
              <th class="ath" >Destination</th>
              <th class="ath" >Priority</th>
              <th class="ath" >Notes</th>
            </tr>
          </thead>
        </table>
      </div>
     </div>

解决方法

对于任何感兴趣的人，答案是将 class clearfix 添加到包装 div 如

<div class="card clearfix">

现在卡片总是在内容的外面。