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

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

 
  
 
 MENU CONTENT GOES HERE 
 
  
 MAIN CONTENT GOES HERE 
  
 RIGHT COLUMN GOES HERE 
 
  

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

我希望mainContent div扩展到全宽（所以它填写匹配span10的大小）。

我使用以下jQuery代码动态更改mainContent div的类名称以实现此function（并且它按预期工作）：

 $(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('span10').addClass('span7'); } } // Execute on load checkWidth(); // Bind event listener $(window).resize(checkWidth); }); 

我的问题：当浏览器窗口resize时，这是处理Twitter Bootstrap中跨度更改的首选方法吗？ 或者，我是否应该将span7的CSS更改为平板电脑屏幕尺寸以匹配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修复。 然后再说一遍，ie8不会隐藏span3。

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

 
 
  
 
 MENU CONTENT GOES HERE 
 
  
  MAIN CONTENT GOES HERE 
  
 RIGHT COLUMN GOES HERE