jQuery 根据窗口大小动态更改类名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11917216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically changing class name based on window size
提问by Per Henrik Lausten
I am using Twitter Bootstrap to create a responsive site using the following layout (simplified for this 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>
When the browser window resizes to tablet size, the rightColumn div is hidden as expected - but it leaves white space next to the mainContent div (with a size of span3).
当浏览器窗口调整为平板电脑大小时，rightColumn div 会按预期隐藏 - 但它会在 mainContent div 旁边留下空白（大小为 span3）。
I would like the mainContent div to expand to full width (so it fills out matches span10 in size).
我希望 mainContent div 扩展到全宽（因此它会填充大小与 span10 匹配的内容）。
I am using the following jQuery code to dynamically change the class name for the mainContent div to achive this (and it works as expected):
我正在使用以下 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);
});
My question: is this the preferred way to handle changes to spans in Twitter Bootstrap when the browser window resizes? Or should I just change the CSS for span7 for tablet screen sizes to match that of span10?
我的问题：这是在浏览器窗口调整大小时处理 Twitter Bootstrap 中跨度更改的首选方法吗？或者我应该只更改用于平板电脑屏幕尺寸的 span7 的 CSS 以匹配 span10 的 CSS？
回答by Per Henrik Lausten
I will answer it myself: I removed the Javascript code and replaced it with this simple change to the Bootstrap CSS to change the width of span7 to the same width as span10 for tablet screen sizes:
我会自己回答：我删除了 Javascript 代码，并用 Bootstrap CSS 的这个简单更改替换了它，以将 span7 的宽度更改为与平板电脑屏幕尺寸的 span10 相同的宽度：
@media (max-width: 979px) and (min-width: 768px) {
.row-fluid .span7 {
width: 82.87292817100001%;
}
}
回答by jplara
but media queries don't work on ie8 and below. i think you're better off with the js fix. then again, ie8's not gonna hide the span3 anyway.
但媒体查询不适用于 ie8 及以下。我认为你最好使用 js 修复。话又说回来，无论如何，ie8 不会隐藏span3。
but here's what i use. When you remove the class span7 from that div, it automagically takes up 100% of the remaining width, assuming you don't have styles that specifically set the width of #mainContent
但这是我使用的。当您从该 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>
