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

时间:2016-08-31 07:34:28

标签: twitter-bootstrap-3

我有一个包含两个列布局的页面,默认情况下第二列是折叠的,第一列是col-xs-12类。通过单击按钮,两列都获得col-xs-6类。因为空间有限,我想隐藏一些东西。如果我在div上使用visible-md,当小于992px的大小时,它将被隐藏。问题是,虽然更改了容器大小(从col-xs-12到col-xs-6),但窗口大小没有改变。根据它的容器大小而不是浏览器窗口大小,是否可以限制visible-md功能?我的意思是没有写jquery。使用bootstrap的类。 感谢

2 个答案:

答案 0 :(得分:1)

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

如果你想在列有这个类的时候隐藏其中一个列中的东西 - 那么你可以使用后代选择器或类似的只在列有类时选择那些元素...

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

(这当然与特定的视口宽度没有任何关系 - 但是因为你是动态切换类,所以在这个例子中无关紧要。)

答案 1 :(得分:0)

正如@cBroe所说,您是否尝试过将.hidden-md用于要隐藏的元素的默认类?这适用于bootstrap v3。