Question

大家好我需要有两列布局，但我需要内容叠加。这是一个小提琴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”表的正下方。日Thnx

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>

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

Answer 2

这不是CSS应该做的事情，而是让jQuery解决你的问题：

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

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

Answer 3

另外，另一种方式：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;
  }


}

Bootstrap多列折叠

3 个答案: