Colspan align Twitter Загрузочный лоток на размер окна?

Question

Я новичок в использовании Twitter-бутстрапа, и я не могу обернуть вокруг себя идею организации сетки. В принципе, я хочу упорядочить эту страницу с правильным набором информации, совпадающей с левой. Я попытался вложить информацию в строки и просто держал гнездо, пока не потерялся. В примере с 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 -->