css - Colspan 在调整窗口大小时对齐 Twitter Bootstrap？

Question

我是使用 Twitter Bootstrap 的新手，我无法理解他们关于网格组织的想法。基本上我想安排这个页面，右边的信息集在左边。我尝试用行嵌套信息，然后一直嵌套直到我迷路。在下面的 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

似乎正在工作：

<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 3

改成：

  <!-- 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 -->