我用bootstrap 4.0创建了两个表：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="pr-1">
<h2>Specifications</h2>
<table class="table stats">
<tbody>
<tr>
<th>Price :</th>
<td class=" text-right">
100 </td>
</tr>
<tr>
<th>Manufacturer:</th>
<td class=" text-right">
Gigabyte </td>
</tr>
<tr>
<th>Wattage:</th>
<td class=" text-right">
150 </td>
</tr>
<tr>
<th>Product:</th>
<td class=" text-right">
Product 1 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-6">
<div class="pr-1">
<h2>Earning</h2>
<table class="table stats">
<tbody>
</tbody>
<thead>
<tr>
<th>Period</th>
<th class="text-right">Rev</th>
<th class="text-right">Cost</th>
<th class="text-right">Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hour</td>
<td class="text-right text-info">$
<span id="rev-hour">
0.022 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-hour">
0.006 </span>
</td>
<td class="text-right text-success">$
<span id="earning-hour">
0.016 </span>
</td>
</tr>
<tr>
<td>Day</td>
<td class="text-right text-info">$
<span id="rev-day">
1.34 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-day">
0.36 </span>
</td>
<td class="text-right text-success">$
<span id="earning-day">
0.98 </span>
</td>
</tr>
<tr>
<td>Week</td>
<td class="text-right text-info">$
<span id="rev-week">
9.37 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-week">
2.52 </span>
</td>
<td class="text-right text-success">$
<span id="earning-week">
6.85 </span>
</td>
</tr>
<tr>
<td>Month</td>
<td class="text-right text-info">$
<span id="rev-month">
37.48 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-month">
10.08 </span>
</td>
<td class="text-right text-success">$
<span id="earning-month">
27.40 </span>
</td>
</tr>
<tr>
<td>Year</td>
<td class="text-right text-info">$
<span id="rev-year">
449.77 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-year">
120.96 </span>
</td>
<td class="text-right text-success">$
<span id="earning-year">
328.81 </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
在移动设备上查看时，这两个桌子保持原位，并且彼此之间未对齐。
任何建议如何使这两个表具有响应性？
感谢您的答复！
答案 0 :(得分：1)
如注释中所述，您需要包括响应断点。您应该使用col-6而不是使用col-md-6 col-sm-12。如果将此代码添加到代码中，则在小型设备上将使用12的列大小，在中等大小或更高的设备上将使用6的列大小。
我在下面的代码段中添加了断点。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="pr-1">
<h2>Specifications</h2>
<table class="table stats">
<tbody>
<tr>
<th>Price :</th>
<td class=" text-right">
100 </td>
</tr>
<tr>
<th>Manufacturer:</th>
<td class=" text-right">
Gigabyte </td>
</tr>
<tr>
<th>Wattage:</th>
<td class=" text-right">
150 </td>
</tr>
<tr>
<th>Product:</th>
<td class=" text-right">
Product 1 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="pr-1">
<h2>Earning</h2>
<table class="table stats">
<tbody>
</tbody>
<thead>
<tr>
<th>Period</th>
<th class="text-right">Rev</th>
<th class="text-right">Cost</th>
<th class="text-right">Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hour</td>
<td class="text-right text-info">$
<span id="rev-hour">
0.022 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-hour">
0.006 </span>
</td>
<td class="text-right text-success">$
<span id="earning-hour">
0.016 </span>
</td>
</tr>
<tr>
<td>Day</td>
<td class="text-right text-info">$
<span id="rev-day">
1.34 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-day">
0.36 </span>
</td>
<td class="text-right text-success">$
<span id="earning-day">
0.98 </span>
</td>
</tr>
<tr>
<td>Week</td>
<td class="text-right text-info">$
<span id="rev-week">
9.37 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-week">
2.52 </span>
</td>
<td class="text-right text-success">$
<span id="earning-week">
6.85 </span>
</td>
</tr>
<tr>
<td>Month</td>
<td class="text-right text-info">$
<span id="rev-month">
37.48 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-month">
10.08 </span>
</td>
<td class="text-right text-success">$
<span id="earning-month">
27.40 </span>
</td>
</tr>
<tr>
<td>Year</td>
<td class="text-right text-info">$
<span id="rev-year">
449.77 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-year">
120.96 </span>
</td>
<td class="text-right text-success">$
<span id="earning-year">
328.81 </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>