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

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

做到这一点的最好方法，甚至不用担心 Bootstrap 将来可能会改变设备宽度，是向您的 body 添加 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