Question

在提出问题之前，我想描述一下我要解决的问题。

我有一个用bootstrap制作的页面

http://inants.com/kadmos/web/kad/bootres/ji/break.html

需要这样做，以便当浏览器页面调整我用于左侧菜单的引导程序左标签（屏幕截图的左侧部分）时，将成为引导程序折叠菜单（屏幕截图的右侧部分）

截图位于：http://inants.com/kadmos/web/menu.png

但问题是他们应该有不同的html代码和bootstrap类。这就是为什么我写了一个jquery代码，添加和删除必要的标签和类。例如，当浏览器全屏显示时，我的html代码应如下所示：

<div class="tabbable tabs-left">
        <button type="button" style="display:none;" class="btn btn-navbar" data-toggle="collapse"   data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#A">My Visited Jobs</a>
            </li>
            <li>
                <a data-toggle="tab" href="#B">My Saved Jobs</a>
            </li>
            <li>
                <a data-toggle="tab" href="#C">My Searches</a>
            </li>
            <li>
                <a data-toggle="tab" href="#D">My Alets</a>
            </li>
            <li>
                <a data-toggle="tab" href="#E">My Profile</a>
            </li>
            <li>
                <a data-toggle="tab" href="#F">My Settings</a>
            </li>
        </ul>
        <div class="tab-content"></div>
</div>

在响应式视图中，应该有以下代码：

<div class="tabbable tabs-left navbar navbar-inverse openNavbar">
    <button type="button" style="display:block;" class="btn btn-navbar" data-toggle="collapse"   data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <div class="nav-collapse collapse">
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#A">My Visited Jobs</a>
            </li>
            <li>...
            </li>
        </ul>
    </div>
    <div class="tab-content"></div>
</div>

因此我们可以看到在响应模式下，对html进行了以下更改：

“navbar navbar-inverse openNavbar”引导类被添加到具有“tabbable”类的div
在具有“tabbable”类的div中，“按钮”显示：block;
“ul”标签插入具有“nav-collapse collapse”类的div中

这是响应上面提到的html代码更改的jquery代码：

<script type="text/javascript">
    $(document).ready(function() {
        $(window).resize(function() {
            if ($(window).width() <= 979) {
                $('.content > .tabbable').addClass('navbar navbar-inverse openNavbar');
                if ($('.nav').parent().hasClass('tabbable')) {
                    $('.nav').wrap('<div class="nav-collapse collapse"></div>');
                }

                $('.content > .tabbable > button').show();

            } else { 
                $('.content > .tabbable').removeClass('navbar navbar-inverse openNavbar');
                if (!$('.nav').parent().hasClass('tabbable')) {
                    $('.nav').unwrap()
                }
                $('.content > .tabbable > button').hide();
            }
        });
        if ($(window).width() <= 979) {
            $('.content > .tabbable').addClass('navbar navbar-inverse openNavbar');
            if ($('.nav').parent().hasClass('tabbable')) {
                $('.nav').wrap('<div class="nav-collapse collapse"></div>');
            }
            $('.content > .tabbable > button').show();

        } else { 
            $('.content > .tabbable').removeClass('navbar navbar-inverse openNavbar');
            if (!$('.nav').parent().hasClass('tabbable')) {
                 $('.nav').unwrap()
            }
            $('.content > .tabbable > button').hide();
        }
    });
</script>

虽然看起来一切正常，但它应该正常工作，但是......

当我在大小为979px-963px的Mozilla（Internet Explorer 9）中调整页面大小时，该页面正在破碎。特别是它不起作用@media（max-width：979px）{...}条件，在bootstrap-responsive.css，bootstrap.css，style.css文件中编写了适当的代码。在我看来，问题在于Mozilla（IE9）和Chrome的大小不同，但是当大小相同时，页面在一个浏览器上显示错误，而在另一个浏览器上显示错误。当我将条件$（window）.width（）＆lt; = 979）更改为$（window）.width（）＆lt; 979），它变得恰恰相反......

将等待有关此错误解决方案的建议。

提前致谢。

Answer 1

问题的根源在于javascript返回的窗口宽度并不总是与某些浏览器（see the accepted answer here）中@media查询确定的窗口宽度相同。差异通常在20px左右，即右侧滚动条的宽度。

正如Iain和Chris所述，bootstrap utility classes是一个选项，这是一个有效的例子：http://www.bootply.com/66344

祝你好运！

跨浏览器问题响应式设计

1 个答案: