Динамическое изменение имени класса на основе размера окна

Я использую 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>

Когда окно браузера изменяет размер до размера планшета, divColumn div скрывается, как ожидалось, но он оставляет пустое пространство рядом с div основного содержимого (с размером span3).

Я хотел бы, чтобы div mainContent расширялся до полной ширины (поэтому он заполняет совпадения span10 по размеру).

Я использую следующий код jQuery для динамического изменения имени класса для div mainContent для достижения этого (и он работает как ожидалось):

$(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 при изменении размера окна браузера? Или я должен просто изменить CSS для span7 для размеров экрана планшета в соответствии с размерами span10?

Ответы

Ответ 1

Я сам ответю: я удалил код Javascript и заменил его простым изменением на CSS Bootstrap, чтобы изменить ширину span7 на ту же ширину, что и span10, для размеров экрана планшета:

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

Ответ 2

но медиа-запросы не работают на ie8 и ниже. Я думаю, вам лучше с js fix. то снова, т.е. не будет скрывать span3 в любом случае.

но вот что я использую. Когда вы удаляете класс span7 из этого div, он автоматически занимает 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>