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

Question

我使用Bootstrap 3作为使用PHP和HTML创建的网页.

使用Bootstrap 3上的响应式网格和类,您可以为div分配多个类,以根据当前屏幕大小定义不同的宽度 - 例如:

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

这指的是屏幕尺寸采用col-lg大型设备,col-md对媒体装置,col-sm为小devicesand col-xs额外的小型设备.
它按预期工作,但我想知道如何确定Bootstrap目前正在使用哪些类,以便我可以在屏幕上显示当前大小的版本.

有没有办法可以使用PHP(或jQuery)确定上面哪个网格选项/ col类当前是活动的？我自己找不到合适的解决方案.

蒂姆,非常感谢.

Answer 1

这样做的最佳方法,即使不担心引导程序是否会在将来改变设备宽度,也可以通过向您的身体添加4个div并检查哪一个是可见的.这适用于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

Answer 2

这是一个简单的测试,您可以尝试显示在重新调整大小到某个大小时bootstrap使用的类.

宽度取自当前窗口,条件或屏幕尺寸来自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');
       }
    });
});