Question

有没有办法从一个有效的tab-pane桌面解决方案开始，但对于低于992px（移动）的所有内容有不同的方法？

所以我有类似的东西：

<div class="tab-pane fade in active" id="tab_1">
    something
</div>
<div class="tab-pane" id="tab_2">
    something else
</div>

现在，当分辨率低于.in时，我宁愿在tab_2中使用类.active和992px而不是tab_1。

Answer 1

是的，当然。

通过操作DOM，CSS类是可编辑的。在您的情况下，只要可以动态检测窗口大小，.fade和.in类将按预期放置。

以下是使用jQuery的代码片段：

$(document).ready(function() {
    function changeTab() {
        if ($(window).width()< 992) {
            $("#tab_1").removeClass("fade in");
            $("#tab_2").addClass("fade in");
        }else{
            $("#tab_1").addClass("fade in");
            $("#tab_2").removeClass("fade in");
        }
    }
    changeTab();

    // Bind the function, it will be executed once window is resized.
    $(window).resize(changeTab);
});

Answer 2

您可以拥有一个用于所有分辨率的标签窗格，但该窗格的内容取决于分辨率，因此只显示正确的分辨率。

（不确定我是否正确解释了你的问题......）

根据分辨率显示不同的第一个活动Bootstrap选项卡窗格

2 个答案: