如何防止 Bootstrap 折叠的子级在折叠折叠时调整大小

Question

我正在处理的页面需要一个可折叠元素，我通过 Bootstrap 水平折叠实现了该元素。其中有一个table。随着折叠折叠 table 挤压并增加高度，table 本身和每一行，这意味着过渡看起来不平滑。这在元素未折叠时尤其明显，因为在折叠完全展开之前行不会调整大小。

如何在动画期间保持 table 一致？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Answer 1

解决方案显然是保持 Bootstrap 提供的内联样式，即 style="width: 300px;" 用于卡体。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

如何防止 Bootstrap 折叠的子级在折叠折叠时调整大小

How to prevent children of a Bootstrap collapse resizing as the collapse collapses

html

css

twitter-bootstrap

bootstrap-5