如何防止 Bootstrap 崩溃的子项在崩溃崩溃时调整大小

Posted 2023-03-05

【中文标题】如何防止 Bootstrap 崩溃的子项在崩溃崩溃时调整大小

【英文标题】：How to prevent children of a Bootstrap collapse resizing as the collapse collapses

【发布时间】：2022-01-19 19:14:06

【问题描述】：

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

如何在动画过程中保持表格一致？

<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"  cellspacing="0" cellpadding="5">
          <tbody class="">
            <tr class="">
              <td colspan="2" class="">
                <h2 class="">Table</h2>
              </td>
            </tr>
            <tr class="">
              <td class="" >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 内置了您需要的所有对齐方式，而浮点数大多已过时。

我在适当的 CSS 文件中有所有其他样式，当我正在测试解决方案时，那个样式就在那里。使用 float 本身是为了让折叠（看起来）从左到右折叠，而不是常规的相反。可能不是最好的解决方案，但这是我在快速搜索后发现的，并且现在似乎正在工作。我也在没有它的情况下进行了测试，并且仍然可以顺便调整表格的大小。

【参考方案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"  cellspacing="0" cellpadding="5">
          <tbody class="">
            <tr class="">
              <td colspan="2" class="">
                <h2 class="">Table</h2>
              </td>
            </tr>
            <tr class="">
              <td class="" >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>

【讨论】：

很高兴您找到了解决方法。不要忘记接受您的回答。