代码之家  ›  专栏  ›  技术社区  ›  user2571510

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

  •  6
  • user2571510  · 技术社区  · 10 年前

    我将Bootstrap 3用于使用PHP和HTML创建的网页。

    启用响应网格和类 引导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类当前处于活动状态?我自己也找不到合适的解决办法。

    7 回复  |  直到 5 年前
        1
  •  19
  •   patrick    8 年前

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

        2
  •  9
  •   patrick    9 年前

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

    宽度取自当前窗口,条件或屏幕大小来自 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');
           }
        });
    });
    
        3
  •  4
  •   Lee Taylor Dejan.S    9 年前

    文件摘录 : 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)
        4
  •  3
  •   Elliot Larson    6 年前

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

        5
  •  1
  •   szabozoltan    4 年前

    最近 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
  •  0
  •   SunnyRed    10 年前

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

    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
  •  0
  •   xErik    9 年前

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