如何确定当前使用哪个网格选项

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