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(); 事件，您可以對其進行更新以添加樣式並相應地將其刪除。