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

Question

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

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

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

Я использую следующий JQuery код для динамического изменения имени класса для 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?

Answer 1

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

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

Answer 2

но медиа-запросы не работают на ie8 и ниже. Я думаю, вам лучше с js fix. то опять же, ie8 не собирается скрывать 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>