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

这可以通过bootstrap完成吗？有必要克隆整个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();事件，您可以更新它以添加样式并相应地删除它们。

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

2 个答案: