Bootstrap多列摺疊

嗨，大家好，我需要有兩列布局，但我需要內容堆疊起來。這裏是一個小提琴http://jsfiddle.net/kljuco/KPMCJ/。Bootstrap多列摺疊

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 
<div class="row"> 
    <div class="span6"> 
     <table class="table"> 
      <tr><th colspan="2">Test 1</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
    </div> 
    <div class="span6"> 
     <table class="table"> 
      <tr><th colspan="2">Test 2</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
    </div> 
</div> 
<div class="row"> 
    <div class="span6"> 
     <table class="table"> 
      <tr><th colspan="2">Test 3</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
    </div> 
    <div class="span6"> 
      <table class="table"> 
       <tr><th colspan="2">Test 4</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
    </div> 
</div><div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div><div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div>

我需要「測試3」表在「測試1」表下。日Thnx

來源

2013-02-12 kljuco

你看到我用下面的jsfiddle更新的答案：http://jsfiddle.net/persianturtle/KPMCJ/3/我希望這有助於！ – 2013-02-12 16:24:21

你可以嵌套你行這樣的...

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 
<div class="row"> 
    <div class="span6"> 
     <table class="table"> 
      <tr><th colspan="2">Test 1</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
     <div class="row"> 
      <div class="span6"> 
       <table class="table"> 
        <tr><th colspan="2">Test 3</th></tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </div> 
    <div class="span6"> 
     <table class="table"> 
      <tr><th colspan="2">Test 2</th></tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
      <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
       <tr> 
       <td>test</td> 
       <td>test</td> 
      </tr> 
     </table> 
     <div class="row"> 
      <div class="span6"> 
       <table class="table"> 
        <tr><th colspan="2">Test 4</th></tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
        <tr> 
          <td>test</td> 
          <td>test</td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div><div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div>

至少你可以開始從這一調整得到你想要的

來源

2013-02-12 14:13:58 groteworld

的結果。這是不是一件CSS應該做的而讓jQuery的解決你的問題：

<table id="first" class="table"> .... 
<table id="second" class="table"> ... 
<table id="third" class="table"> ... 

$('#third').insertBefore('#second');

來源

2013-02-12 14:15:23

此外，另一種方式：http://jsfiddle.net/persianturtle/KPMCJ/3/

壞消息是我不得不復制第二張表的html。

好消息，沒有jQuery。

看一看。

@media (max-width: 767px) { 

    #second { 
     display:none; 
    } 

#second-small { 
     display:table; 
    } 


} 


@media (min-width: 766px) { 

    #second-small { 
     display:none; 
    } 


}

來源

2013-02-12 14:29:36

Bootstrap多列摺疊

回答

相關問題