是否可以在引导程序中具有垂直响应功能？

Question

我有一个3面板布局如下：

当页面高度低于某个阈值时，我希望Pane 3消失。

Bootstrap的repsonsive功能基于屏幕宽度触发。 只要屏幕很宽，bootstrap就不会从lg转换为md到sm到xs。因此，在宽屏但短屏幕上，它会显示所有三个窗格。鉴于我想在Pane 2和Pane 3中展示的内容，它们不能很短。

是否可以使用bootstrap解决此问题，或者可能是一些与引导程序一起使用的自定义CSS？尽可能避免使用自定义java脚本。

Answer 1

是的，根据this link，还有min-height / max-height。

所以你要做

@media screen and (max-height: 300px) {
    .panel {
        display: block;
    }
}

Answer 2

  

是否可以使用bootstrap解决此问题

没有。 Bootstrap的网格系统是以列为导向的，因此“意识到了”，响应性归结为对device screen width作出反应的媒体查询。

  

...也许是一些与bootstrap一起使用的自定义CSS

绝对！以同样的方式，Bootstrap使用media queries根据屏幕宽度调整CSS，您可以使用一个来调整基于device-height或height的CSS（两者都接受最小和最大前缀）。

  

（设备高度）描述输出设备的高度（表示整个屏幕或页面，而不仅仅是渲染区域，例如文档   窗口）

/* Replace 500px with the height you wish to hide your block at, */

@media screen and (max-height: 500px) {
  body {
    background: red;
  }
  /* Instead of changing the body, you would add CSS to set display:none on the block in question*/
}