如何确定当前使用的是哪个网格选项答案

【问题标题】：How to determine which grid option is currently used如何确定当前使用的是哪个网格选项
【发布时间】：2014-09-11 09:23:31
【问题描述】：

我将 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 用于小型设备和col-xs 用于超小型设备的屏幕尺寸。
它按预期工作，但我想知道如何确定 Bootstrap 目前正在使用哪些类，以便我可以在屏幕上显示当前大小版本。

有没有一种方法可以使用 PHP（或 jQuery）确定上述哪些网格选项/col 类当前处于活动状态？我自己找不到合适的解决方案。

【问题讨论】：

Bootstrap 可用于媒体查询，因此只需调整您的窗口大小...。在 chrome 或 firefox 中有很多扩展...。
谢谢。我知道如何获取屏幕的当前高度和宽度，但我怎么知道 Bootstrap 何时使用哪个类？是否有特定的像素阈值？
看看文档：getbootstrap.com/css/#grid ... 每一件事都有解释

标签： php jquery twitter-bootstrap twitter-bootstrap-3 grid-layout

【解决方案1】：

最好的方法是在你的 body 中添加 4 个 div 并检查哪个是可见的，即使不用担心 bootstrap 将来是否会改变设备宽度。这适用于 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

【讨论】：

响应式实用程序已在 bootstrap 4 中移除，因此如果依赖 'visible-*' documentation，上述方法将不再有效。
你可以为此使用 hidden-* 类。
不幸的是，它们也已被删除。对于查看此内容的任何人，最好将来使用 .d-*-none 类和 .d-*-block 来关注文档，希望这会有所帮助。
确实如此！而不是visible-xs，我使用d-none d-xs-block d-sm-none，它运行良好。可以添加` || “xl”` 以及返回以防止在屏幕属于引导程序 4 中布局的超大类别 (>= 1200px) 的情况下出现未定义的值。
woops d-none 是多余的^^

【解决方案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');
       }
    });
});

【讨论】：

这是完美的——正是我想要的。非常感谢！
这是不准确的（如：对我不起作用）。此外，您还引入了各种潜在的与浏览器相关的问题。如果 Bootstrap 会改变大小怎么办。我发现的砖固体解决方案已发布在此页面的其他位置

【解决方案3】：

文档摘录：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) { ... }

网格选项

通过方便的表格了解 Bootstrap 网格系统的各个方面如何在多个设备上工作。

超小型设备电话 (
小设备平板电脑（≥768px）
中型设备台式机（≥992px）
大型设备桌面（≥1200px）

【讨论】：

也非常感谢！

【解决方案4】：

如果其他人登陆这篇文章寻找 Bootstrap 4 答案，我最终创建了这个 HTML 的 sn-p，它使用 BS 响应实用程序显示了适当的 div 大小。

我添加了一些内联样式，以便更容易粘贴到 sn-p 中，但样式可以移动到样式表中。

<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>

这里有更多关于 Bootstrap 4 display utilities used 的信息。

【讨论】：

太棒了！！ :D 我正在制作它，在发布之前我已经看到它已经由你完成了，而且颜色更好。这与 BOOTSTRAP 4 完美搭配。谢谢 Elliot！

【解决方案5】：

最近documentation（在隐藏元素部分）建议这样做：

<div class='d-block d-sm-none          ' data-device='xs'>xs</div>
<div class='d-none d-sm-block d-md-none' data-device='sm'>sm</div>
<div class='d-none d-md-block d-lg-none' data-device='md'>md</div>
<div class='d-none d-lg-block d-xl-none' data-device='lg'>lg</div>
<div class='d-none d-xl-block          ' data-device='xl'>xl</div>

【讨论】：

【解决方案6】：

通过这个小sn-p可以看到当前设备类型(Mobile, Tablet, Desktop, Large)直接加到body上面。玩得开心。

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();

【讨论】：

【解决方案7】：

修改了 SunnyRed 的答案。

显示当前的 Bootstrap 3 布局

不依赖 jQuery，作为公认的答案。
始终在窗口的右/下角显示布局信息，高于其他内容。
不修改页面本身。
在第一次执行之前等待文档准备好，从而从一开始就提供正确的结果。

在你的 body 标签之前添加这个：

    <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>

【讨论】：