Bootstrap 崩溃崩溃/打开错误的元素

该项目使用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>

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

折叠的卡片：

解决方案取决于集成这些模板的外部容器和您正在使用的Bootstrap版本。
Bootstrap 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 add到.card-元素中即可，如下例所示：

<!-- 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>

通常，您可以在这些.cards周围 Package 一个.col，您想要的行为将自动完成，例如：

<!-- 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>

如果您使用的是Bootstrap 4.x，请移除父系中的.card-group类别。

Bootstrap 崩溃崩溃/打开错误的元素

1条答案

相关问题

热门标签

最新问答