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和小型设备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');
       }
    });
});

Answer 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网格系统的各个方面如何在具有便捷表的多个设备上工作。

超小型设备电话（＆lt; 768px）
小型设备平板电脑（≥768px）
中型设备台式机（≥992px）
大型设备台式机（≥1200px）

Answer 4

如果其他人登陆此帖子以寻找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>

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

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

Answer 6

通过这个小片段，您可以看到当前设备类型（移动设备，平板电脑，桌面设备，大型设备）直接添加正文顶部。玩得开心。

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

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

7 个答案: