css - Bootstrap 多列折叠

Question

大家好，我需要两列布局，但我需要内容堆叠起来。 这是一把 fiddle http://jsfiddle.net/kljuco/KPMCJ/ .

<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”表格的正下方。 谢谢

Answer 1

你可以像这样嵌套你的行......

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

至少你可以从这里开始调整以获得你想要的结果