使卡片物品与其他卡片对齐

问题描述

我遇到一个问题，即添加其他文本时卡片内的项目彼此不对齐。

如下图所示，书籍和推荐书籍中的项目是匹配/对齐的。。

这是我在推荐书籍中添加观看次数时的图像。

如您所见，第 1 本书中的项目已调整，我不希望发生这种情况我想匹配/对齐书籍中的第 1 名和推荐书籍中的第 1 名，即使在添加查看次数后推荐书籍。

这是我的卡片代码。

<div class="col">
  <div class="card w-100 h-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card w-100 h-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Recommended Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>.
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>

据我所知，w-100 和 h-100 使卡片相互响应。但是我希望 books 中的 items 和 recommended books items 匹配。我做了 w-100 和 h-100 来响应卡片的宽度和高度。

编辑：我删除了卡片中的 h-100，这就是结果。我希望书籍和推荐的高度应该匹配。但是，当我将其退回时，物品并未如第二张图片所示对齐。

解决方法

删除 h-100 包装器上的 card-body 类：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row">
<div class="col">
  <div class="card w-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card w-100 h-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Recommended Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>.
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>
</div>