gpt4 book ai didi

css - Bootstrap 多列折叠

转载 作者:太空宇宙 更新时间:2023-11-03 18:51:21 25 4
gpt4 key购买 nike

大家好,我需要两列布局,但我需要内容堆叠起来。这是一把 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”表格的正下方。谢谢

最佳答案

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

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

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

关于css - Bootstrap 多列折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14834158/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com