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