悬停时的引导卡动画答案

【问题标题】：Bootstrap card animation when hover悬停时的引导卡动画
【发布时间】：2022-07-01 04:12:58
【问题描述】：

我可以查看动态显示悬停时会增长的一些卡片的位置。这是我的 CSS：

.card-deck .card {
    height:200px;
    width: 200px;
    
    transition: transform .1s;
}

.card-deck .card:hover {
    -ms-transform: scale(1.25); /* IE 9 */
    -webkit-transform: scale(1.25); /* Safari 3-8 */
    transform: scale(1.25); 
}

@media (min-width: 576px) {
    .card-deck .card {
        flex-basis: calc(50% - 30px);
        /* #{$grid-gutter-width} */
    }
}

@media (min-width: 768px) {
    .card-deck .card {
        flex-basis: calc(33.33% - 30px);
    }
}

@media (min-width: 992px) {
    .card-deck .card {
        flex-basis: calc(25% - 30px);
    }
}

.card-img-top {
    width: 100%;
    height: 75%;
    object-fit: cover;
}

.card-title {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

还有我的 home.blade.php：

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card-deck">
            @forelse ($meetings as $meeting)
            @csrf
                <div class="card mb-3 bg-dark">
                    @if ($meeting['photoName'])
                        <img class="card-img-top" src="{{ url($meeting['photoName']) }}" alt="Foto de la asignatura">
                    @else
                        <img class="card-img-top" src="https://www.arqhys.com/general/wp-content/uploads/2011/07/Roles-de-la-inform%C3%A1tica.jpg" alt="Foto de la asignatura">
                    @endif
                    <div class="card-body bg-dark">
                        <a href="{{ route('meeting.show', $meeting->id) }}" class="stretched-link text-white">{{ $meeting->title }}</a>
                    </div>
                </div> 
            @empty
                <h4> Nothing to show yet.</h4>
            @endforelse
            </div>
        </div>
    </div>
</div>

我有 2 个问题无法解决：

1- 当卡片增长时，它在上一行的上方，但在下方的卡片下方，所以卡片的一部分被隐藏了，我该如何解决这个问题？

2- 行由 4 张卡片组成，但如果卡片的数量不是 4 的倍数，我希望最后一行不完整，而不是由 1、2 或 3 张更大的卡片填充。我该怎么做？

【问题讨论】：

对于第一个问题，您可以在悬停时使用更高的 z-index 值。对于第二个问题，您必须将 class="col" 替换为 class="col-lg-3 col-md-4 col-6 "。通过这样做，您可以在大屏幕上看到 4 张卡片，在中屏幕上看到 3 张卡片，在小屏幕上看到 2 张卡片。
我建议提出两个单独的问题，并针对每个问题进行具体分析，您可能会得到更好的结果/

标签： php css hover bootstrap-5 card

【解决方案1】：

.card-deck 已被删除

Breaking 放弃.card-deck 以支持我们的网格。将您的卡片包装在列类中并添加父级 .row-cols-* 容器以重新创建卡片组（但对响应式对齐有更多控制）。

-- https://getbootstrap.com/docs/5.2/migration/#card

<div class="container">
    <div class="row">
        <div class="col">
            <div class="row row-cols-4 g-2">
            @forelse ($meetings as $meeting)
            @csrf
                <div class="col">
                  <div class="card mb-3 bg-dark h-100">

这是一个有效的sn-p，第5张卡被包装：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<div class="row row-cols-4 g-2">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

【讨论】：

【解决方案2】：

<style>
.card{
border: 2px solid black;
}
</style>```

【讨论】：