twitter-bootstrap Bootstrap 中的两个并排表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23977404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two Side-by-Side Tables in Bootstrap
提问by okoboko
Is it possible to display two tables, side-by-side, in Bootstrap 3?
是否可以在 Bootstrap 3 中并排显示两个表？
Each tried making each one col-md-6 and, although it shrinks the width, they don't wrap next to each other (instead one is on top of the other in the full-width view).
每个人都尝试制作一个 col-md-6 ，尽管它缩小了宽度，但它们不会彼此环绕（而是在全角视图中一个在另一个的顶部）。
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
</div>
<h2 class="sub-header">Latest Incidents</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
回答by Shawn Taylor
You need to wrap each table in a col-6 div, as opposed to applying col-6 to the table itself. Here is your code with col-xs-6 wrapped around:
您需要将每个表包装在 col-6 div 中，而不是将 col-6 应用于表本身。这是带有 col-xs-6 的代码：
<div class="col-xs-6">
<h2 class="sub-header">Subtitle</h2>
<div class="table-responsive">
<table class="table table-striped">...
And here it is in action: http://www.bootply.com/lbrQZF3152
它正在运行：http: //www.bootply.com/lbrQZF3152
回答by kmo
Add your col-md-6 class to each wrapping div so you have this structure:
将您的 col-md-6 类添加到每个包装 div 中，以便您拥有以下结构：
<div class="table-responsive col-md-6">
<table>...</table>
</div>
<div class="table-responsive col-md-6">
<table>...</table>
</div>
回答by karlingen
Shawn and kmo already pointed out that using col-md-6class will make this work.
I would also like to add that if you are doing this inside an uland lithings might break.
Shawn 和 kmo 已经指出使用col-md-6class 可以完成这项工作。我还想补充一点，如果您在内部执行此操作ul，li事情可能会中断。
The solution is quite simple though. Just add a div with the class rowbefore:
不过解决方法很简单。只需在类row之前添加一个 div ：
<div class="row">
<div class="table-responsive col-md-6">
<table>...</table>
</div>
<div class="table-responsive col-md-6">
<table>...</table>
</div>
</div>
