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

我使用Bootstrap3创建一个使用PHP和HTML创建的网页

使用Bootstrap 3上的响应网格和类，您可以将多个类分配给一个div，以根据当前屏幕大小定义不同的宽度-exmaple：

<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）确定上面哪些网格选项/列类当前处于活动状态？我自己找不到合适的解决方案。

文档摘录：

我们偶尔会对这些媒体查询进行扩展，以包括最大宽度，从而将CSS限制在一组较窄的设备上

抄袭

网格选项

通过一个方便的表格，了解引导网格系统的各个方面如何跨多个设备工作

---

• 超小型设备电话（这里有一个简单的测试，您可以尝试显示当重新调整到某个大小时，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');
         }
      });
  });
  

  $（文档）.ready（函数（）{
  $（窗口）.on（'resize'，function（））{
  var winWidth=$（window.width（）；
  如果（winWidth<768）{
  log（'windowwidth:'+winWidth+'classused:colxs'）；
  }否则，如果（winWidth有了这个小片段，您可以看到当前的设备类型（移动设备、平板电脑、桌面、大型设备）直接添加到正文的顶部。祝您玩得开心
  
  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();
  
  修改了SunnyRed的答案
  
  显示当前引导3布局
  
  
  不依赖jQuery作为公认的答案
  布局信息始终显示在窗口的右/下角，位于其他内容上方
  不修改页面本身
  在第一次执行之前等待文档准备就绪，从而从一开始就提供正确的结果
  
  将此添加到您的身体标签之前：
  
  
  函数refreshDeviceInfo（）{
  变量id='deviceInfo'，
  type=“Mobile（xs）”，
  宽度类型='innerWidth'，
  容器=document.getElementById（id），
  宽度；
  如果（！（'innerWidth'在窗口中））{
  宽度类型='clientWidth'；
  window=document.documentElement | | document.body；
  }
  宽度=窗口[宽度类型]；
  如果（！容器）{
  container=document.createElement（'div'）；
  container.setAttribute（“id”，id）；
  setAttribute（“样式”，“位置：固定；右侧：0px；底部：0px；填充：10px；z索引：9999；背景：rgba（0255,0,0.6）”）；
  document.body.insertBefore（容器，document.body.firstChild）；
  }
  如果（宽度>=1200）{
  type=“大型桌面（lg）”；
  }否则如果（宽度>=992）{
  type=“中型桌面（md）”；
  }否则如果（宽度>=768）{
  type=“片剂（sm）”；
  }
  container.innerHTML=type；
  };
  //调整大小时刷新
  如果（window.addEventListener）{
  addEventListener（“调整大小”，refreshDeviceInfo，false）；
  }else if（window.attachEvent）{
  window.attachEvent（“onresize”，refreshDeviceInfo）；
  }否则{
  窗口[“onresize”]=刷新设备信息；
  }
  document.addEventListener（“DOMContentLoaded”），函数（事件）{
  refreshDeviceInfo（）；
  });
  实现这一点的最佳方法是，在身体上添加4个div，并检查哪一个是可见的。这在引导3和4中起作用，即使不用担心引导将来是否会改变设备宽度
  
  您的HTML如下所示（将其添加到文档正文的某个位置）：
  
  这将返回
  xs
  ，
  sm
  ，
  md
  或
  lg
  如果其他人在这篇文章上寻找Bootstrap 4答案，我最终创建了这个HTML片段，它使用BS响应实用程序显示了适当的大小div
  
  我添加了一些内联样式，以便更容易粘贴到代码段中，但是可以将样式移动到样式表中
  
  <div class="d-none d-xl-block" style="background: #007bff; color: #fff; padding: 5px; text-align: center;">XL</div>
  <div class="d-none d-lg-block d-xl-none" style="background: #27a745; color: #fff; padding: 5px; text-align: center;">LG</div>
  <div class="d-none d-md-block d-lg-none" style="background: #ffc108; color: #fff; padding: 5px; text-align: center;">MD</div>
  <div class="d-none d-sm-block d-md-none" style="background: #18a2b8; color: #fff; padding: 5px; text-align: center;">SM</div>
  <div class="d-block d-sm-none" style="background: #dc3545; color: #fff; padding: 5px; text-align: center;">XS</div>
  
  XL
  LG
  医学博士
  性虐待
  XS
  
  以下是有关引导4的更多信息。
  最近（在隐藏元素部分）建议：
  
  
  xs
  山猫
  医学博士
  lg
  xl
  Bootstrap可用于媒体查询，因此只需考虑您的窗口大小……chrome或firefox中有很多扩展功能……谢谢。我知道如何获取屏幕的当前高度和宽度，但如何知道Bootstrap何时使用哪一类？是否有特定的像素阈值？请查看文档：……我知道的每件事s解释这是完美的-正是我想要的。非常感谢！这是不准确的（如：不适合我）。此外，您还引入了各种潜在的浏览器相关问题。如果Bootstrap会改变大小，该怎么办。我找到的一个砖块式解决方案发布在本页的其他地方，也非常感谢！Bootstrap 4中的响应实用程序现在已被删除，因此如果依赖“visible-*”您不能使用，则上述功能将不再有效他为此隐藏了-*类。不幸的是，它们也被删除了。对于任何查看此文档的人来说，最好在以后使用
  .d-*-none
  类和
  .d-*-block
  来跟踪文档，希望如此
  <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')
  }
  
  <div class="d-none d-xl-block" style="background: #007bff; color: #fff; padding: 5px; text-align: center;">XL</div>
  <div class="d-none d-lg-block d-xl-none" style="background: #27a745; color: #fff; padding: 5px; text-align: center;">LG</div>
  <div class="d-none d-md-block d-lg-none" style="background: #ffc108; color: #fff; padding: 5px; text-align: center;">MD</div>
  <div class="d-none d-sm-block d-md-none" style="background: #18a2b8; color: #fff; padding: 5px; text-align: center;">SM</div>
  <div class="d-block d-sm-none" style="background: #dc3545; color: #fff; padding: 5px; text-align: center;">XS</div>