gpt4 book ai didi

twitter-bootstrap - Bootstrap 中的两个并排表

转载 作者:行者123 更新时间:2023-12-03 13:13:01 27 4
gpt4 key购买 nike

是否可以在 Bootstrap 3 中并排显示两个表格?

每个人都尝试制作一个 col-md-6 ,尽管它缩小了宽度,但它们不会彼此相邻(而是在全宽 View 中一个在另一个之上)。

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

最佳答案

您需要将每个表包装在 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">...

它在行动中:http://www.bootply.com/lbrQZF3152

关于twitter-bootstrap - Bootstrap 中的两个并排表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23977404/

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