悬停时引导卡动画

Question

我可以查看在悬停时动态展示一些会增长的卡片。 是我的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;
}

我的家。

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

Answer 1

.card-deck已删除

破坏掉落.card-deck有利于我们的网格。将您的卡片包装在列类中，并添加父.Row-Cols - *容器重新创建卡片甲板（但可以更好地控制响应式对齐）。

- https：//getbootstrap.com/docs/docs/5.2/migration/migration/migration/umigration/unvcard

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

这是一台带5张卡片的工作片段：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

Answer 2

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