1

大家好，我需要有两列布局，但我需要将内容堆叠起来。这是一个小提琴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>

我需要将“Test 3”表放在“Test 1”表的正下方。谢谢

4

3 回答 3

0

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

<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-12T14:13:58.850 回答
0

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

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

$('#third').insertBefore('#second');
于 2013-02-12T14:15:23.283 回答
0

另外，另一种方式：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-12T14:29:36.423 回答