引导崩溃/打开错误的元素

Question

该项目使用Vue进行，以下是组件代码：

<template>

  <div class="card card-body text-center m-3" style="max-width: 500px;">
    <h3 class="d-inline m-3">{{this.task.title}}</h3>
    <h4 class="d-inline mr-3">Due by {{this.task.deadline.toDateString()}}</h4>
    <h4 class="mr-3" :class="{'text-danger': this.task.deadline.getTime() < new Date().getTime(),
    'text-success': completedTaskPercentage == 100}">{{completedTaskPercentage}}% complete</h4>
    <div class="progress m-3">
      <div class="progress-bar" :class="{'bg-danger': this.task.deadline.getTime() < new Date().getTime(),
      'bg-success': completedTaskPercentage == 100}" role="progressbar" :style="{width: completedTaskPercentage + '%'}">
      </div>
    </div>
    <button class="btn btn-primary btn-inline m-3" data-bs-toggle="collapse" v-bind:data-bs-target="'#_'+task.id">Toggle
      subtasks</button>
    <div class="collapse" v-bind:id="'_'+task.id">
      <div class="card card-body text-start m-3 text-light"
        :class="{'bg-success':subtask.finished, 'bg-danger':!subtask.finished}" v-for="subtask in this.task.subtasks">
        <h4>{{subtask.title}}</h4>
      </div>
    </div>
  </div>
</template>

现在，折叠按钮按预期打开正确的元素，但它也增加了我不想要的其他卡片的大小(见图片)。

开户卡：

​

​

折叠卡：

​

Answer 1

解决方案取决于您的外部容器，它集成了这些模板和您正在使用的引导版。

引导5:根据您的描述和代码，我想您正在将它们集成到一个简单的.row中，例如：

<div class="row">
  <div class="card card-body text-center m-3" style="max-width: 500px;">
    ...
  </div>
  <div class="card card-body text-center m-3" style="max-width: 500px;">
    ...
  </div>
</div>

如果是这样的话，您可以简单地将.h-100添加到.card-elements中，如下面的示例所示：

​

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<div class="row">
  <div class="card card-body h-100 text-center m-3" style="max-width: 500px;">
    <h3 class="d-inline m-3">Some task</h3>
    <h4 class="d-inline mr-3">Due by yesterday</h4>
    <h4 class="mr-3 text-success">100% complete</h4>
    <div class="progress m-3">
      <div class="progress-bar bg-success">
      </div>
    </div>
    <button class="btn btn-primary btn-inline m-3" data-bs-toggle="collapse" v-bind:data-bs-target="'#_'+task.id">Toggle
      subtasks</button>
    <div class="collapse" v-bind:id="'_'+task.id">
      <div class="card card-body text-start m-3 text-light"
           :class="{'bg-success':subtask.finished, 'bg-danger':!subtask.finished}" v-for="subtask in this.task.subtasks">
        <h4>{{subtask.title}}</h4>
      </div>
    </div>
    <div>
      Test
    </div>
    <div>
      Test
    </div>
  </div>  
  
  <div class="card card-body h-100 text-center m-3" style="max-width: 500px;">
    <h3 class="d-inline m-3">Some task</h3>
    <h4 class="d-inline mr-3">Due by yesterday</h4>
    <h4 class="mr-3 text-success">100% complete</h4>
    <div class="progress m-3">
      <div class="progress-bar bg-success">
      </div>
    </div>
    <button class="btn btn-primary btn-inline m-3" data-bs-toggle="collapse" v-bind:data-bs-target="'#_'+task.id">Toggle
      subtasks</button>
    <div class="collapse" v-bind:id="'_'+task.id">
      <div class="card card-body text-start m-3 text-light"
           :class="{'bg-success':subtask.finished, 'bg-danger':!subtask.finished}" v-for="subtask in this.task.subtasks">
        <h4>{{subtask.title}}</h4>
      </div>
    </div>
  </div>
</div>

​

通常，围绕这些.col包装一个.cards，您想要的行为就会自动完成，例如：

​

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<div class="row">
  <div class="col">
    <div class="card card-body text-center m-3" style="max-width: 500px;">
      <h3 class="d-inline m-3">Some task</h3>
      <h4 class="d-inline mr-3">Due by yesterday</h4>
      <h4 class="mr-3 text-success">100% complete</h4>
      <div class="progress m-3">
        <div class="progress-bar bg-success">
        </div>
      </div>
      <button class="btn btn-primary btn-inline m-3" data-bs-toggle="collapse" v-bind:data-bs-target="'#_'+task.id">Toggle
        subtasks</button>
      <div class="collapse" v-bind:id="'_'+task.id">
        <div class="card card-body text-start m-3 text-light"
             :class="{'bg-success':subtask.finished, 'bg-danger':!subtask.finished}" v-for="subtask in this.task.subtasks">
          <h4>{{subtask.title}}</h4>
        </div>
      </div>
      <div>
        Test
      </div>
      <div>
        Test
      </div>
    </div>  
  </div>  
  
  <div class="col">
    <div class="card card-body text-center m-3" style="max-width: 500px;">
      <h3 class="d-inline m-3">Some task</h3>
      <h4 class="d-inline mr-3">Due by yesterday</h4>
      <h4 class="mr-3 text-success">100% complete</h4>
      <div class="progress m-3">
        <div class="progress-bar bg-success">
        </div>
      </div>
      <button class="btn btn-primary btn-inline m-3" data-bs-toggle="collapse" v-bind:data-bs-target="'#_'+task.id">Toggle
        subtasks</button>
      <div class="collapse" v-bind:id="'_'+task.id">
        <div class="card card-body text-start m-3 text-light"
             :class="{'bg-success':subtask.finished, 'bg-danger':!subtask.finished}" v-for="subtask in this.task.subtasks">
          <h4>{{subtask.title}}</h4>
        </div>
      </div>
    </div>
  </div>
</div>

​

如果使用的是引导程序4.x，请删除父类中的.card-group类。