是否有可能在引导中具有垂直响应特性？

Question

我有一个像这样布置的3个面板：

​

当页面高度小于某个阈值时，我希望窗格3消失。

引导程序的响应功能是基于屏幕宽度触发的。只要屏幕很宽，引导程序就不会从lg到md过渡到sm到xs。因此，在一个宽但短的屏幕上，它会显示所有三个窗格。考虑到我想在Pane 2和Pane 3中显示的内容，它们不可能很短。

是否有可能使用引导程序来解决这个问题，或者使用一些自定义的CSS来解决这个问题呢？尽量避免使用自定义java脚本。

Answer 1

是的，根据此链接的说法，还有min-height/max-height。

所以你就这么做

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

Answer 2

是否可以使用引导程序来解决这个问题？

不是的。引导程序的网格系统是以列为导向的，因此，响应性可以归结为对设备屏幕宽度作出反应的媒体查询。

...maybe一些自定义CSS，它位于引导程序旁边。

绝对一点儿没错!同样，Bootstrap使用媒体查询根据屏幕宽度调整CSS，您可以使用一个来根据device-height或height调整CSS (两者都接受min和max前缀)。

(设备高度)描述输出设备的高度(指整个屏幕或页面，而不仅仅是呈现区域，如文档窗口)。

​

/* 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*/
}

​