我正在處理的頁面需要一個可折疊元素，我使用 Bootstrap 水平折疊實作了該元素。里面有一張桌子。隨著折疊的折疊，表格會擠壓并增加高度，表格本身和每一行，這意味著過渡看起來并不平滑。這在元素未折疊時尤其明顯，因為在折疊完全展開之前行不會調整大小。
如何在影片期間保持表格一致？
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="item-statcard item-number w-25">
<p class="">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#statcard-collapse" aria-expanded="false" aria-controls="statcard-collapse">Statistics</button>
</p>
<div class="">
<div class="collapse collapse-horizontal show" id="statcard-collapse" style="float: right;">
<div class="card card-body statcard-body">
<table id="statcard-table" class="texte_principal_small table" width="100%" cellspacing="0" cellpadding="5">
<tbody class="">
<tr class="">
<td colspan="2" class="">
<h2 class="">Table</h2>
</td>
</tr>
<tr class="">
<td class="" width="40%">Dimensions (L-w-h)</td>
<td class="">8.5 x 3.23 x 2.75 m</td>
</tr>
<tr class="">
<td class="">Total weight</td>
<td class="">28 tonnes</td>
</tr>
<tr class="">
<td class="">Crew</td>
<td class="">6</td>
</tr>
<tr class="">
<td class="" valign="top">Propulsion</td>
<td class="">diesel engine</td>
</tr>
<tr class="">
<td class="">Speed</td>
<td class="">50 km/h</td>
</tr>
<tr class="">
<td class="">Range</td>
<td class="">420 km</td>
</tr>
<tr class="">
<td class="">Total production</td>
<td class="">2020 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>uj5u.com熱心網友回復：
解決方案顯然是保持 Bootstrap 提供的行內樣式，即 style="width: 300px;"卡體。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="item-statcard item-number w-25">
<p class="">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#statcard-collapse" aria-expanded="false" aria-controls="statcard-collapse">Statistics</button>
</p>
<div class="">
<div class="collapse collapse-horizontal show" id="statcard-collapse" style="float: right;">
<div class="card card-body statcard-body" style="width: 300px;">
<table id="statcard-table" class="texte_principal_small table" width="100%" cellspacing="0" cellpadding="5">
<tbody class="">
<tr class="">
<td colspan="2" class="">
<h2 class="">Table</h2>
</td>
</tr>
<tr class="">
<td class="" width="40%">Dimensions (L-w-h)</td>
<td class="">8.5 x 3.23 x 2.75 m</td>
</tr>
<tr class="">
<td class="">Total weight</td>
<td class="">28 tonnes</td>
</tr>
<tr class="">
<td class="">Crew</td>
<td class="">6</td>
</tr>
<tr class="">
<td class="" valign="top">Propulsion</td>
<td class="">diesel engine</td>
</tr>
<tr class="">
<td class="">Speed</td>
<td class="">50 km/h</td>
</tr>
<tr class="">
<td class="">Range</td>
<td class="">420 km</td>
</tr>
<tr class="">
<td class="">Total production</td>
<td class="">2020 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/390771.html
標籤：html css 推特引导 bootstrap-5
上一篇：將值傳遞給Django中的模態