如何確定當前使用哪個網格選項

Question

我使用Bootstrap 3作爲使用PHP和HTML創建的網頁。

隨着的響應電網和班級引導3您可以分配多個類的div來定義根據當前的屏幕大小不同的寬度 - 〔實施例：

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">...</div> 

這是指屏幕大小使用用於大型設備的col-lg，用於中型設備的col-md，用於小型設備的col-sm以及用於小型設備的col-xs。
它按預期工作，但我想知道如何確定Bootstrap目前正在使用哪些類，以便我可以在屏幕上顯示當前的大小版本。

有沒有一種方法可以確定使用PHP（或jQuery）的上述哪個網格選項/ col類當前處於活動狀態？我自己找不到合適的解決方案。 Tim先生非常感謝。

Answer 1

這裏有一個簡單的測試，你可以嘗試顯示當調整到一定大小時引導程序正在使用的類。

寬度取自當前窗口，條件或屏幕尺寸從BOOTSTRAP，不要依賴此，因爲這是不準確的，可能是或多或少3px。

您可以根據自己的喜好進一步改進。

$(document).ready(function(){ 
    $(window).on('resize',function(){ 
     var winWidth = $(window).width(); 
     if(winWidth < 768){ 
      console.log('Window Width: '+ winWidth + 'class used: col-xs'); 
     }else if(winWidth <= 991){ 
      console.log('Window Width: '+ winWidth + 'class used: col-sm'); 
     }else if(winWidth <= 1199){ 
      console.log('Window Width: '+ winWidth + 'class used: col-md'); 
     }else{ 
      console.log('Window Width: '+ winWidth + 'class used: col-lg'); 
     } 
    }); 
}); 

Answer 2

提取的文檔的：http://getbootstrap.com/css/#grid

我們偶爾在這些媒體查詢擴展到包括最大寬度爲CSS限制在較窄的一組設備。

複製

@media (max-width: @screen-xs-max) { ... } 
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } 
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } 
@media (min-width: @screen-lg-min) { ... } 

網格選項

見跨多個設備的引導電網系統工作，一臺得心應手的方面是如何。

• 超小型設備手機（< 768px）
• 小型設備片（≥768px）
• 劑裝置，臺式機（≥992px）
• 大型設備桌面（≥1200px）

Answer 3

有了這個小片段，你可以看到當前的設備類型（手機，平板電腦，臺式機，大型）直接添加在機身頂部。玩的開心。

var refreshDeviceInfo = function() { 
    var id = 'deviceInfo', 
     type = "Mobile", 
     widthType = 'innerWidth', 
     container = document.getElementById(id), 
     width; 

    if (!('innerWidth' in window)) { 
     widthType = 'clientWidth'; 
     window = document.documentElement || document.body; 
    } 
    width = window[widthType]; 

    // check, if our info container is already in place, 
    // if not prepend it to the body 
    if (!container) { 
     container = document.createElement('div'); 
     container.setAttribute("id", id); 
     container.setAttribute("style", "padding:20px; text-align:center; background:#eee"); 
     document.body.insertBefore(container, document.body.firstChild); 
    } 

    if (width >= 1200) { 
     type = "Large"; 
    } 
    else if (width >= 992) { 
     type = "Desktop"; 
    } 
    else if (width >= 768) { 
     type = "Tablet"; 
    } 
    container.innerHTML = type; 
}; 

// refresh on resize 
if (window.addEventListener) { 
    window.addEventListener("resize", refreshDeviceInfo, false); 
} else if (window.attachEvent) { 
    window.attachEvent("onresize", refreshDeviceInfo); 
} else { 
    window["onresize"] = refreshDeviceInfo; 
} 

// initial refresh 
refreshDeviceInfo(); 

Answer 4

修改了SunnyRed的答案。

顯示當前引導3佈局

• 不依賴於jQuery的，作爲公認的答案。
• 總是在窗口的右下角顯示佈局信息，高於其他內容。
• 不修改頁面本身。
• 在第一次執行前等待文檔準備就緒，從一開始就提供正確的結果。

您主體之前添加此標籤：

<script> 
     function refreshDeviceInfo() { 
      var id = 'deviceInfo', 
       type = "Mobile (xs)", 
       widthType = 'innerWidth', 
       container = document.getElementById(id), 
       width; 

      if (!('innerWidth' in window)) { 
       widthType = 'clientWidth'; 
       window = document.documentElement || document.body; 
      } 
      width = window[widthType]; 

      if (!container) { 
       container = document.createElement('div'); 
       container.setAttribute("id", id); 
       container.setAttribute("style", "position:fixed; right:0px; bottom: 0px; padding:10px; z-index:9999;background:rgba(0,255,0,0.6)"); 
       document.body.insertBefore(container, document.body.firstChild); 
      } 

      if (width >= 1200) { 
       type = "Large Desktop (lg)"; 
      } else if (width >= 992) { 
       type = "Medium Desktop (md)"; 
      } else if (width >= 768) { 
       type = "Tablet (sm)"; 
      } 
      container.innerHTML = type; 
     }; 

     // refresh on resize 
     if (window.addEventListener) { 
      window.addEventListener("resize", refreshDeviceInfo, false); 
     } else if (window.attachEvent) { 
      window.attachEvent("onresize", refreshDeviceInfo); 
     } else { 
      window["onresize"] = refreshDeviceInfo; 
     } 
     document.addEventListener("DOMContentLoaded", function(event) { 
      refreshDeviceInfo(); 
     }); 
    </script> 

Answer 5

要做到這一點，最好的辦法，甚至不擔心，如果引導可能會在未來改變設備的寬度，將4 divs到你的身體並檢查哪一個是可見的。這適用於Bootstrap 3和4！

你的HTML看起來像這樣（加在你的文檔的身體這個地方）：

<div class='device-check visible-xs' data-device='xs'></div> 
<div class='device-check visible-sm' data-device='sm'></div> 
<div class='device-check visible-md' data-device='md'></div> 
<div class='device-check visible-lg' data-device='lg'></div> 

，那麼你可以找到與當前網格選項：

function get_current_grid_option(){ 
    return $('.device-check:visible').attr('data-device') 
} 

這將返回xs，sm ，md或lg