时间戳

首页 > 解决方案 > 等高引导卡（雨果）

html - 等高引导卡（雨果）

问题描述

我一直在使用 Hugo 来建立我的网站，但是，即使在卡片 div 中使用了 h-100 类（如许多 SO 帖子中所述）之后，我也无法制作相同高度的引导卡片。我在下面复制了我的 HTML 代码。

我猜css中的某些东西必须覆盖类。

任何意见，将不胜感激。

 <section id="blog-posts">
<div class="container-fluid ">
  <div class="row text-center">
    <div class="col-lg-12">
      <h2 class="section-heading">Latest Blog Posts</h2>
      <div class="section-underline"></div>
    </div>
    {{- range ( where site.RegularPages "Section" "blog" | first 3 ) }}
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12 mb-5">
          <div class="card h-100">
            <div class="card-img img-fluid">
              <!-- <div class="blog-cat-tag">Test</div> -->
              {{ if isset .Params "featured_image" }}<img class="blog-image" src="{{ index .Params "featured_image"}}" alt="...">{{end}}
            </div>
            <div class="card-body">
              <div class="project-title">{{ .Title }}</div>
              <p class='card-text'>{{ .Summary }}</p>
              <a href="{{ .Permalink }}">Read More</a>
              <!-- <a class="viewmore" href="">Read More</a> -->
              </div>
              <div class="index-blog-post-details">
                <div class="index-blog-post-icons">
                  <i class="far fa-calendar-alt"></i> {{- .Date.Format "January 2, 2006" -}}
                  <i class="far fa-clock"></i> {{ .ReadingTime }} min read
                  </div>
            </div>
          </div>
        </div>
        {{ end}}
      </div>
    </div>
  </div>

标签： htmlcsshugo

解决方案

推荐阅读