HTML <article> 用 Bootstrap 4 张牌打得不好

Question

我正在尝试将 HTML 语义标签 <article> 添加到我的 Bootstrap 4 卡片代码中。

卡片也使用 h-100，因此它们在 row 上的高度相等。但是，当我添加标签时，每张卡片都变得取决于其内容，而不是保持统一的高度。

我试过在卡片之前和之后立即添加文章标签，但两次尝试都产生了不同的结果。

我已将整行包含在代码片段中；最后两张没有 article 标签的卡片用于比较。

请注意：单击 'Full Page' 选项以查看正确显示的代码段 _ 谢谢

Bootstrap4 片段：

<!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> 是否带有本机属性，但（不足为奇？）没有在网上找到任何说明它有的东西。

如有任何帮助/建议，我们将不胜感激

Answer 1

感谢@tromgy 对 .card 元素使用 article 而不是 div 的评论建议 _ 它奏效了！

<div class="col-lg-3 col-md-6 col-sm-12">
    <article 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 INSTEAD of .div</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 -->
    </article><!-- /.card -->
</div>

HTML <article> 用 Bootstrap 4 张牌打得不好

HTML <article> not playing well with Bootstrap 4 card

html

article

semantic-markup

bootstrap-4