Jquery 引导响应调整大小
我有一个Twitter引导布局，有3列。不能切换中间列，但可以隐藏和显示左右列。我怎么可能做到这一点，当左边的柱子是隐藏的，中间的一根横跨所有的路等等 如果我有一个363网格，我隐藏了左边的列，它就变成了633网格。我如何使用jquery使其自动将跨度更改为9 3，从而填充页面 我已经尝试过用jquery更改属性，但我无法做到这一点，因为我对jquery不是很了解 这是我的密码：Jquery 引导响应调整大小,jquery,twitter-bootstrap,Jquery,Twitter Bootstrap,我有一个Twitter引导布局，有3列。不能切换中间列，但可以隐藏和显示左右列。我怎么可能做到这一点，当左边的柱子是隐藏的，中间的一根横跨所有的路等等 如果我有一个363网格，我隐藏了左边的列，它就变成了633网格。我如何使用jquery使其自动将跨度更改为9 3，从而填充页面 我已经尝试过用jquery更改属性，但我无法做到这一点，因为我对jquery不是很了解 这是我的密码： <!DOCTYPE html> <html lang="en"> <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://bootswatch.com/amelia/bootstrap.min.css" rel="stylesheet">
<link href="http://bootswatch.com/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
@media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
</style>
<link href="http://bootswatch.com/default/bootstrap-responsive.min.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
<ul class="nav">
<li class="active"><a id="lefttoggle">Left</a></li>
<li><a id="righttoggle">Right</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div id="left" class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div id="middle" class="span6">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
<div id="right" class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div><!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#lefttoggle").click(function(){
$("#left").toggle(1000);
});
$("#righttoggle").click(function(){
$("#right").toggle(1000);
});
});
</script>
</body>
</html>
引导，来自Twitter
身体{
填充顶部：60px；
填充底部：40px；
}
.侧边栏导航{
填充：9px0；
}
@介质（最大宽度：980px）{
/*启用浮动导航栏文本的使用*/
.navbar-text.pull-right{
浮动：无；
左侧填充：5px；
右侧填充：5px；
}
}
登录为
侧栏
侧栏
你好，世界！
这是一个简单的营销或信息网站的模板。它包括一个称为“英雄单元”的大型标注和三个支持内容。把它作为一个起点来创造更独特的东西
标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui
标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui
标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui
标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui
标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui
标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui
侧栏
侧栏
侧栏
&抄袭；公司2013
$（文档）.ready（函数（）{
$（“#lefttoggle”）。单击（函数（）{
$（“#左”）。切换（1000）；
});
$（“#右切换”）。单击（函数（）{
$（“#右”）。切换（1000）；
});
});
提前感谢您的帮助 我想这会满足你的需求 要切换到9+3：
$('#left').removeClass('span3').addClass('hidden');
$('#middle').removeClass('span6').addClass('span9');
$('#right').removeClass('span9').addClass('span6');
$('#left').removeClass('hidden').addClass('span3');
这不是动画，但应该可以工作：
$(document).ready(function(){
$("#lefttoggle").click(function(){
$("#left").toggle(1000);
if($('#middle').hasClass('span6')){
$('#middle').removeClass('span6').addClass('span9');
}
else{
$('#middle').removeClass('span9').addClass('span6');
}
});
$("#righttoggle").click(function(){
$("#right").toggle(1000);
if($('#middle').hasClass('span6')){
$('#middle').removeClass('span6').addClass('span9');
}
else{
$('#middle').removeClass('span9').addClass('span6');
}
});
});
小提示：如果只设置侧边栏的宽度而不是宽度和高度的动画，效果会更好。另外，别忘了，如果左右两侧都被隐藏，您需要将中间部分更改为
span12