根据窗口大小动态更改类名答案

【问题标题】：Dynamically changing class name based on window size根据窗口大小动态更改类名
【发布时间】：2012-08-11 20:01:38
【问题描述】：

我正在使用 Twitter Bootstrap 创建一个使用以下布局的响应式网站（针对此问题进行了简化）：

<div class="container-fluid">
    <div class="row-fluid">
        <!-- Left menu -->
        <div class="span2">
            <div class="sidebar-nav">
                MENU CONTENT GOES HERE
            </div>
        </div>

        <!-- Content -->
        <div id="mainContent" class="span7">
            MAIN CONTENT GOES HERE
        </div>

        <!-- Right column -->
        <div id="rightColumn" class="span3 hidden-phone hidden-tablet">
            RIGHT COLUMN GOES HERE
        </div>
    </div>
</div>

当浏览器窗口调整为平板电脑大小时，rightColumn div 会按预期隐藏 - 但它会在 mainContent div 旁边留下空白（大小为 span3）。

我希望 mainContent div 扩展为全宽（因此它会填充大小与 span10 匹配的内容）。

我正在使用以下 jQuery 代码来动态更改 mainContent div 的类名以实现这一点（它按预期工作）：

$(document).ready(function() {
    var $window = $(window);

        // Function to handle changes to style classes based on window width
        function checkWidth() {
        if ($window.width() < 980) {
            $('#mainContent').removeClass('span7').addClass('span10');
            };

        if ($window.width() >= 980) {
            $('#mainContent').removeClass('span10').addClass('span7');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
        $(window).resize(checkWidth);
});

我的问题：当浏览器窗口调整大小时，这是在 Twitter Bootstrap 中处理跨度更改的首选方式吗？或者我应该只更改平板电脑屏幕尺寸的 span7 的 CSS 以匹配 span10？

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

我自己来回答：我删除了 Javascript 代码并用对 Bootstrap CSS 的这个简单更改来替换它，以将 span7 的宽度更改为与平板电脑屏幕尺寸的 span10 相同的宽度：

@media (max-width: 979px) and (min-width: 768px) {
    .row-fluid .span7 {
    width: 82.87292817100001%;
    }
}

【讨论】：

个别设置的CSS改改很简单，如果两者的区别不是那么简单呢？

【解决方案2】：

但媒体查询不适用于 ie8 及以下版本。我认为你最好用js修复。话又说回来，ie8 无论如何也不会隐藏 span3。

但这就是我使用的。当您从该 div 中删除类 span7 时，它会自动占用剩余宽度的 100%，假设您没有专门设置 #mainContent 宽度的样式

<div class="container-fluid">
    <div class="row-fluid">
        <!-- Left menu -->
        <div class="span2">
            <div class="sidebar-nav">
                MENU CONTENT GOES HERE
            </div>
        </div>

        <!-- Content -->
        <div id="mainContent" class=""> <!-------------remove the span7---->
            MAIN CONTENT GOES HERE
        </div>

        <!-- Right column -->
        <div id="rightColumn" class="span3 hidden-phone hidden-tablet">
            RIGHT COLUMN GOES HERE
        </div>
    </div>
</div>

【讨论】：