HTML 中的不同类取决于屏幕大小答案

【问题标题】：Different class in HTML depending of screen sizeHTML 中的不同类取决于屏幕大小
【发布时间】：2018-10-06 16:03:26
【问题描述】：

我是引导程序的新手，我不知道如何执行以下操作：我正在使用 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 内容并根据屏幕隐藏？谢谢。

【问题讨论】：

请贴出所有相关代码。目前尚不清楚问题是什么。你是否试图让左标签在 xs 屏幕上移动到顶部。没有tabs-left 类。

标签： javascript django html bootstrap-4

【解决方案1】：

如果屏幕宽度小于您想要的断点，只需使用 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(); 事件，您可以更新它以添加样式并响应删除它们。

【讨论】：

【解决方案2】：

您可以尝试使用 mobiledetect.js 脚本，并根据它注册的设备，将其发送到适合每种设备类型（即移动设备、PC 等）的不同 CSS 脚本

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

【讨论】：