css - Bootstrap - 在屏幕宽度减小时隐藏(而不是下降到下一行)

Question

在大屏幕上，我有一排盒子，因为屏幕宽度变窄了，盒子一个接一个地塞到下面:

<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 已经完成了艰苦的工作——它已经知道什么时候应该把盒子藏在下面。难道不能简单地说“隐藏而不是藏在下面”吗？

Answer 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>