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

时间:2018-04-26 04:20:58

标签: javascript html django html5 bootstrap-4

我是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">

这可以通过bootstrap完成吗?有必要克隆整个div内容并根据屏幕隐藏? 谢谢。

2 个答案:

答案 0 :(得分:0)

您可以尝试使用mobiledetect.js脚本,并根据它注册的设备,将其发送到适合每种类型设备(即移动设备,个人电脑等)的不同CSS脚本。

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

答案 1 :(得分:0)

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