gpt4 book ai didi

html - 如何对齐 Bootstrap 面板内同一行中的两个表?

转载 作者:行者123 更新时间:2023-12-02 09:35:30 24 4
gpt4 key购买 nike

我想将两个表格并排放置在同一个网格行中,但运行以下代码时表格只是堆叠在一起:

<body>
...
<div class="container-fluid">
<div class="starter-template">

<div class='panel panel-primary'>
<div class='panel-heading'><h1>Main Title</h1></div>
<div class='panel-body'>

<div class='row-fluid'>
<h4>Title</h4>
<div class='span4'>
<table class='table table-bordered'>
<thead>
<tr><th>feat1</th><th>feat2</th></tr></thead>
<tbody>
<tr><td>132</td><td>value a</td></tr>
<tr><td>114</td><td>value b</td></tr>
</tbody>
</table>
</div><!--closes table1-->

<div class='span4'>
<table class='table table-bordered'>
<thead>
<tr><th>feat1</th><th>feat3</th></tr>
</thead>
<tbody>
<tr><td>264</td><td>val b</td></tr>
<tr><td>3</td><td>val c</td></tr>
</tbody>
</table>
</div><!--closes table2-->

</div>

</div><!--closes div panel-body-->
</div><!--closes div panel-->
</div> <!-- /.starter-template -->
</div><!-- /.container -->
...
</body>

结果是所有行中的一个表,然后是第一个表下面的第二个表。

最佳答案

检查 fiddle 如果您仍想在较小的屏幕上并排显示表格,请使用 col-xs-6。如果您想在较小的屏幕上以单独的行显示表格,请使用 col-lg-6http://jsfiddle.net/DTcHh/1680/

<div class="row-fluid">
<div class="col-xs-6">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>One</th>
<th>One</th>
<th>One</th>
</tr>
<thead>
<tbody>
<tr>
<td>Two</td>
<td>Two</td>
<td>Two</td>
</tbody>
</table>
</div>
</div>
<div class="col-xs-6">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>One</th>
<th>One</th>
<th>One</th>
</tr>
<thead>
<tbody>
<tr>
<td>Two</td>
<td>Two</td>
<td>Two</td>
</table>
</div>
</div>
</div>

关于html - 如何对齐 Bootstrap 面板内同一行中的两个表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26786032/

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