Bootstrap - 随着屏幕宽度减小而隐藏（而不是下降到下一行）答案

【问题标题】：Bootstrap - Hide as screen width reduces (rather than drop to next row)Bootstrap - 随着屏幕宽度减小而隐藏（而不是下降到下一行）
【发布时间】：2019-08-26 20:56:31
【问题描述】：

在大屏幕上，我有一排盒子，因为屏幕宽度缩小了盒子一个接一个地向下折叠：

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>  
</div>

https://jsfiddle.net/m1aec0ov/

但我只想显示顶行的框。因此，我试图让它们消失，而不是下面的框下拉。没有什么可以自动解决这个问题吗？

有人建议我使用 hidden-xs 或 d-block (Bootstrap 4) 类来使框消失，但这需要我计算每个框的位置并应用正确的屏幕尺寸类。

这感觉很奇怪，因为 Bootstrap 已经完成了艰苦的工作——它已经知道什么时候应该把盒子塞到下面。难道不能简单地说，“隐藏而不是藏在下面”吗？

【问题讨论】：

给容器，你想隐藏一个id并在必要时隐藏它...？
这需要我计算何时应该隐藏盒子，这很奇怪，因为不需要计算盒子何时应该落下（需要完全相同的检测逻辑，但结果不同）。
哦，是的，我明白了...对不起，我帮不上忙...
这是引导程序 3 还是 4？
如果有更简单的解决方案，都可以使用。

标签： css bootstrap-4

【解决方案1】：

只需将container 设置为max-height 等于内部元素的高度并在其上设置overflow: hidden;

例如：

.box {
    display: inline-block;
    height: 140px;
    width: 140px;
    background-color: blue;
    margin: 5px;
}

/* max-height - height of child (.box) element + margin */
.container {
    max-height: 150px;
    overflow: hidden;
}

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>  
</div>

【讨论】：

简单有效 - 大喊大叫。