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

要做到这一点,最好的方法是在您的身体上添加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

这里有一个简单的测试,您可以尝试显示当重新调整大小到一定大小时,引导程序正在使用什么类。

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

文件摘录 : 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)
• 小型设备平板电脑(768px)
• 中型设备台式机(992px)
• 大型设备桌面(1200px)

如果有人在这篇文章中寻找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 .

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

通过这个小片段,您可以看到当前设备类型 (移动、平板、台式、大型) 直接添加主体的顶部。玩得高兴

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的答案。

显示当前Bootstrap 3布局

• 不依赖jQuery作为接受的答案。
• 始终在窗口的右/下角显示布局信息,位于其他内容上方。
• 不修改页面本身。
• 在第一次执行之前等待文档就绪,从而从一开始就提供正确的结果。

将此添加到 身体 标签:

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