크기에 반응하는 부트 스트랩

3 열이 포함 된 Twitter 부트 스트랩 레이아웃이 있습니다. 중간 열은 전환 할 수 없지만 왼쪽 및 오른쪽 열을 숨기거나 표시 할 수 있습니다. 왼쪽 열이 숨겨져 있고 가운데가 숨겨져있을 때 어떻게 그렇게 할 수 있을까요?크기에 반응하는 부트 스트랩

그래서 나는 그리드가 나는 왼쪽 열 그것이 그리드된다 숨길 경우. 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"문장을 가질 수 있다는 것을 결코 알지 못했다. 그래도 나는 작은 문제에 부딪쳤다. 왼쪽면을 숨길 때 span9까지 중간 크기를 조정하지만 오른쪽 사이드 바를 아래쪽으로 푸시합니다. 그것은 span8을 사용하면 잘 작동하지만 난 그냥 까다로운거야 하하 – iHeff

@ iHeff jQuery는 ** JavaScript ** 라이브러리이므로 자바 스크립트에서 올바른 코드가 원하는 모든 것을 쓸 수 있습니다. '$()'는 단순히 DOM 요소를 선택하는 정규화 된 방법을 제공하고'click()'과 같은 메소드는 정규화 된 이벤트 핸들러입니다. 요점은 브라우저 불일치를 다루는 데 드는 시간을 피할 수있게하는 것입니다. –

깔끔한 정보 주셔서 감사합니다! – iHeff

나는 이것이 당신이 찾고있는 것을 할 것이라고 생각합니다.

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

이 다시 전환하려면 :

3 + 9로 전환하려면이 애니메이션되지

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

출처

2013-06-21 06:42:43 Richard

감사합니다. 조건문 때문에 Tieson과 함께 가야합니다. – iHeff

크기에 반응하는 부트 스트랩

답변

관련 문제