Colspan對齊窗口大小的Twitter Bootstrap？

Question

我是使用Twitter Bootstrap的新手，我無法圍繞他們的網格組織思想包圍我的頭。基本上我想安排這個頁面右邊的一組信息colspaning左邊。我嘗試用行嵌套信息，並保持嵌套，直到我迷路。在JSfiddle下面的例子中，當窗口足夠寬時，表格看起來很好，但是當你縮短窗口的寬度時，這些部分不按順序堆疊。右1-6應該堆疊在一起（如果它們必須堆疊在一起）。提前致謝。

http://jsfiddle.net/wBg8Y/

<div class="container"> 

    <!-- Static navbar --> 
    <div class="navbar navbar-default col-lg-12"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"> 
     <img src='../../../images/mpIcon.PNG' class='sm-icon' /> 
     <!--<span class="glyphicon glyphicon-search"></span>--> 
     Menubar 
     </a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 

     <form class="navbar-form navbar-right" role="search"> 
      <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
      </div><!--<span class="glyphicon glyphicon-star"></span>--> 
     </form> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 

    <!-- Main component for a primary marketing message or call to action --> 
    <!--<div class="jumbotron col-md-10 col-md-offset-1">--> 
    <div class="jumbotron col-md-12"> 
    <div class="row"> 
     <div class="col-md-6"> 
      left top 
     </div> 

     <div class="col-md-3">right 1</div> 
     <div class="col-md-3">right 2</div> 

     <div class="col-md-6"> 
     <div class="col-md-12">Markets</div> 

      <div class="col-md-4">markets left 1</div> 
      <div class="col-md-4">markets left 2</div> 
      <div class="col-md-4">markets left 3</div> 

      <div class="col-md-4">markets left 4</div> 
      <div class="col-md-4">markets left 5</div> 
      <div class="col-md-4">markets left 6</div> 



     </div> 

     <div class="col-md-3">right 3</div> 
     <div class="col-md-3">right 4</div> 

     <div class="col-md-3">right 5</div> 
     <div class="col-md-3">right 6</div> 

    </div> <!-- /row -->   
    </div> <!-- /jumbotron --> 

    <div class="col-md-6">Copyright 2013 Deloitte Development LLC</div> 
    <div class="col-md-6 text-right"> 
    <a href='#'>About</a> | 
    <a href='#'>Contact</a> | 
    <a href='#'>FAQ</a> | 
    <a href='#'>Help</a> | 
    <a href='#'>Support</a> 

    </div> 

</div> <!-- /container --> 

Answer 1

其實，我思前想。解決了。包裝左側部分幫助將其從右側隔離。

Answer 2

變化：

<!-- Static navbar --> 
    <div class="navbar navbar-default col-lg-12"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"> 
     <img src='../../../images/mpIcon.PNG' class='sm-icon' /> 
     <!--<span class="glyphicon glyphicon-search"></span>--> 
     Menubar 
     </a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 

     <form class="navbar-form navbar-right" role="search"> 
      <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
      </div><!--<span class="glyphicon glyphicon-star"></span>--> 
     </form> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 

    <!-- Main component for a primary marketing message or call to action --> 
    <!--<div class="jumbotron col-md-10 col-md-offset-1">--> 
    <div class="jumbotron col-md-12"> 
    <div class="row"> 
     <div class="col-md-6"> 
      left top 
     </div> 

     <div class="col-md-3">right 1</div> 
     <div class="col-md-3">right 2</div> 

     <div class="col-md-6"> 
     <div class="col-md-12">Markets</div> 

      <div class="col-md-4">markets left 1</div> 
      <div class="col-md-4">markets left 2</div> 
      <div class="col-md-4">markets left 3</div> 

      <div class="col-md-4">markets left 4</div> 
      <div class="col-md-4">markets left 5</div> 
      <div class="col-md-4">markets left 6</div> 



     </div> 

     <div class="col-md-3">right 3</div> 
     <div class="col-md-3">right 4</div> 

     <div class="col-md-3">right 5</div> 
     <div class="col-md-3">right 6</div> 

    </div> <!-- /row -->   
    </div> <!-- /jumbotron --> 

    <div class="col-md-6">Copyright 2013 Deloitte Development LLC</div> 
    <div class="col-md-6 text-right"> 
    <a href='#'>About</a> | 
    <a href='#'>Contact</a> | 
    <a href='#'>FAQ</a> | 
    <a href='#'>Help</a> | 
    <a href='#'>Support</a> 

    </div> 

</div> <!-- /container --> 

Answer 3

似乎工作：

<div class="container"> 

    <!-- Static navbar --> 
    <div class="navbar navbar-default col-lg-12"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"> 
     <img src='../../../images/mpIcon.PNG' class='sm-icon' /> 
     <!--<span class="glyphicon glyphicon-search"></span>--> 
     Menubar 
     </a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 

     <form class="navbar-form navbar-right" role="search"> 
      <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
      </div><!--<span class="glyphicon glyphicon-star"></span>--> 
     </form> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 

    <!-- Main component for a primary marketing message or call to action --> 
    <!--<div class="jumbotron col-md-10 col-md-offset-1">--> 
    <div class="jumbotron col-md-12"> 
    <div class="row"> 
     <div class="col-md-6"> 
      left top 
     </div> 

     <div class="col-md-3">right 1</div> 
     <div class="col-md-3">right 2</div> 

     <div class="col-md-6"> 
     <div class="col-md-12">Markets</div> 

      <div class="col-md-4">markets left 1</div> 
      <div class="col-md-4">markets left 2</div> 
      <div class="col-md-4">markets left 3</div> 

      <div class="col-md-4">markets left 4</div> 
      <div class="col-md-4">markets left 5</div> 
      <div class="col-md-4">markets left 6</div> 



     </div> 

     <div class="col-md-3">right 3</div> 
     <div class="col-md-3">right 4</div> 

     <div class="col-md-3">right 5</div> 
     <div class="col-md-3">right 6</div> 

    </div> <!-- /row -->   
    </div> <!-- /jumbotron --> 

    <div class="col-md-6">Copyright 2013 Deloitte Development LLC</div> 
    <div class="col-md-6 text-right"> 
    <a href='#'>About</a> | 
    <a href='#'>Contact</a> | 
    <a href='#'>FAQ</a> | 
    <a href='#'>Help</a> | 
    <a href='#'>Support</a> 

    </div> 

</div> <!-- /container -->