Bootstrap響應調整

我有一個3列的Twitter Bootstrap佈局。中間的colomn不能切換，但左側和右側的列可以隱藏並顯示。當左側欄被隱藏時，中間欄橫跨整個過程等等，我怎麼能這麼做？Bootstrap響應調整

所以，如果我有一個電網和我隱藏左列就變成了格。我怎麼能使用jquery，使它自動改變跨度到所以它填充頁面？

我試着改變jQuery的屬性，但我不能得到那個工作，我不太瞭解jquery。

這裏是我的代碼：

<!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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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>&copy; 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>

這裏是什麼樣子的實時查看：

http://onlinement.iheff.net/new.php

預先感謝您的幫助！

來源

2013-06-21 iHeff

小記：它會如果只動畫側邊欄的寬度而不是寬度和高度，看起來會更好。另外不要忘記，如果左側和右側都隱藏，則需要將中間部分更改爲「span12」。 – snumpy

@snumpy好的電話，我會牢記這一點。謝謝！ – iHeff

這不是動畫片，而是應該工作：

$(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'); 
     } 
    }); 
});

來源

2013-06-21 06:43:51

真棒，非常感謝你！我從來不知道jquery可以有「if」語句，整潔！不過，我遇到了一個小問題。當我隱藏左側時，它會將中間的大小調整爲很好，但會將右側邊欄推到底部。它工作正常，如果我使用span8，但我只是nit挑剔haha – iHeff

@iHeff jQuery是一個** JavaScript **庫，所以你可以寫任何你想要的是JavaScript中的有效代碼。 '$（）'簡單地提供了一個標準化的方式來選擇DOM元素，像'click（）'這樣的方法只是標準化的事件處理程序。整個問題是讓您避免花時間處理瀏覽器不一致問題。 –

整潔，謝謝你的信息！ – iHeff

我認爲這會做你正在尋找的東西。

要切換至9 + 3：

$('#left').removeClass('span3').addClass('hidden'); 
$('#middle').removeClass('span6').addClass('span9');

要切換回：

$('#right').removeClass('span9').addClass('span6'); 
$('#left').removeClass('hidden').addClass('span3');

來源

2013-06-21 06:42:43 Richard

謝謝！不得不與泰森的去，因爲條件陳述 – iHeff

Bootstrap響應調整

回答

相關問題