Twitter bootstrap - 通过 jQuery 在移动设备上显示"visible-lg" div

Question

这个问题听起来很奇怪，因为如果我在bootstrap上定义了一个带有"visible-lg"属性的div，我这样做是为了只在桌面设备上显示。但是我想要一些响应式布局的行为使用这些类。

我想实现的是:我有3列(coll -lg-2, coll -lg-3和coll -lg-7)，最后2列(lg-3和lg-7)都有"可见的lg"属性，这样在手机上我只看到第一个。我想要实现的是:当我点击某个按钮时(该按钮仅在第一个col上带有"visible-xs"的移动设备上可见)，我做如下操作:

$(".btn1").click(function(){
    $(".col1").slideUp(); //hide the first col
    $(".col2").slideDown(); //show the second (with visible-lg)
});

为什么我想要这个?假设当用户单击这个按钮时，我用他在第一个按钮上点击的特定内容填充第二列，现在我想用内容显示第二列。但是我想在移动设备上每次只显示一列，使其响应。

是否可以使用bootstrap + jQuery的响应实用程序或我需要写一个新的CSS类?

Answer 1

好吧，我仍然不确定这是否会像我想要的那样工作(有完整的细节，等等…)，但是要显示以前在移动设备上隐藏的div，而不是使用:

$(".col2").slideDown ();

我使用

:

$(".col2").toggleClass("visible-xs");

通过这种方式，我添加了"visible-xs"类，它也在移动设备上可见。