我想将两个表格并排放置在同一个网格行中，但运行以下代码时表格只是堆叠在一起:
<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-6。 http://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>
