【发布时间】：2022-01-17 03:19:58
【问题描述】：
我正在尝试将 HTML 语义标签 <article> 添加到我的 Bootstrap 4 卡片代码中。
这些卡片也使用h-100，因此它们沿row 的高度相同。但是，当我添加标签时，每张卡片不会保持统一的高度，而是依赖于其内容。
我曾尝试在卡片之前和之后立即添加文章标签，但两次尝试都产生了不同的结果。
我已将整行包含在代码 sn-p 中；最后两张没有article标签的卡片用于比较。
请注意：单击“整页”选项以查看正确显示的 sn-p_谢谢
Bootstrap4 sn-p：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="container-fluid" id="">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h2 class="font styling classes">LOREM IPSUM</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card h-100">
<!-- article tag INSIDE .card div -->
<article>
<img class="card-img-top" src="" alt="" />
<div class="card-body d-flex flex-column">
<h2 class="font styling classes">article INSIDE .card</h2>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="center mt-auto">
<a class="btn mt-auto" href="#" target="_blank" title="Lorem ipsum">read more</a>
</div>
</div>
<!-- /.card-body -->
</article>
</div>
<!-- /.card -->
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<!-- article tag OUTSIDE .card div -->
<article>
<div class="card h-100">
<img class="card-img-top" src="" alt="" />
<div class="card-body d-flex flex-column">
<h2 class="font styling classes">article OUTSIDE .card</h2>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="center mt-auto">
<a class="btn mt-auto" href="#" target="_blank" title="Lorem ipsum">read more</a>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</article>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<!-- article tag = NONE -->
<div class="card h-100">
<img class="card-img-top" src="" alt="" />
<div class="card-body d-flex flex-column">
<h2 class="font styling classes">article = NONE</h2>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
<div class="center mt-auto">
<a class="btn mt-auto" href="#" target="_blank" title="Lorem ipsum">read more</a>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<!-- article tag = NONE -->
<div class="card h-100">
<img class="card-img-top" src="" alt="" />
<div class="card-body d-flex flex-column">
<h2 class="font styling classes">article = NONE</h2>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font styling classes">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</p>
<div class="center mt-auto">
<a class="btn mt-auto" href="#" target="_blank" title="Lorem ipsum">read more</a>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
<!-- /.container-fluid -->
</body>
</html>我还尝试了解 <article> 是否带有原生属性，但（不足为奇？）在网上找不到任何可以说它的东西。
任何帮助/建议将不胜感激
【问题讨论】：
-
感谢sn-p 编辑@J。 Titus _ 我为此挣扎了好一阵子！
-
为什么不简单地设置
<article>的样式并去掉<div>：<article class="card h-100">？ -
@tromgy _ 成功了，谢谢：)
标签： html bootstrap-4 semantic-markup article