HTML中的不同类，具体取决于屏幕大小

Question

我是Bootstrap的新手，我不知道如何执行以下操作：我正在使用Django，并且在我的HTML模板中，我有以下内容：

<div class="tabs tabs-vertical tabs-left">
                            <ul class="nav nav-tabs">

这在大屏幕上可以正常工作，但是当我用手机访问页面时看起来很难看，因此如果屏幕是xs，我需要我的模板看起来像这样：

<div class="tabs">
                            <ul class="nav nav-tabs nav-justified flex-column flex-md-row">

可以用引导程序完成吗？ 是否有必要克隆整个div内容并根据屏幕隐藏？ 谢谢。

Answer 1

您可以尝试使用mobiledetect.js脚本，并根据其注册的设备，将其发送到适合每种类型的设备（例如，移动设备，个人计算机等）的其他CSS脚本。

脚本下载： http : //hgoebl.github.io/mobile-detect.js/

Answer 2

如果屏幕宽度小于所需的断点，请使用javascript添加类。 由于您使用的是Bootstrap，因此可以使用jQuery使其变得更容易。 例：

 if (window.innerWidth <= 500) { $('#nav').removeClass('tabs-vertical tabs-left'); $('#navUl').addClass('nav-justified flex-column flex-md-row'); } console.log(document.getElementById('nav').classList); console.log(document.getElementById('navUl').classList); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tabs tabs-vertical tabs-left" id='nav'> <ul class="nav nav-tabs" id='navUl'> </ul> </div> 

您可以使用该if语句执行所需的操作。 如果将其附加到$(window).resize(); 事件，您可以对其进行更新以添加样式并相应地将其删除。