将 bootstrap visible-md 限制为它的容器大小

Question

我有一个具有两列布局的页面，默认情况下第二列是折叠的，第一列有 col-xs-12 类。通过单击一个按钮，两列都获得 col-xs-6 类。这时候我想隐藏一些东西，因为空间有限。如果我在 div 上使用 visible-md，它会在尺寸小于 992px 时被隐藏。这是问题所在，尽管容器大小发生了变化（从 col-xs-12 到 col-xs-6），但窗口大小并没有改变。是否可以根据容器大小而不是浏览器窗口大小来限制 visible-md 功能？我的意思是不写jquery。使用引导程序的类。 谢谢

Answer 1

我怀疑使用 Bootstrap 的默认功能是否可以做到这一点。您最好自己编写一个小 CSS 规则，根据某些视口宽度隐藏元素。

如果您想在列具有该类时隐藏其中一列中的内容 - 那么您可以使用后代选择器或类似的方法仅在该列具有该类时选择这些元素......

.col-xs-6 .something { display:none; }

（当然，这与特定的视口宽度不再有任何关系——但由于您是动态切换类，因此在这种情况下这无关紧要。）

Answer 2

正如@cBroe 所说，您是否尝试过在要隐藏的元素上使用 .hidden-md 的默认类？这适用于引导程序 v3。