如何解决使卡片物品与其他卡片对齐
如下图所示，书籍和推荐书籍中的项目是匹配/对齐的。。
如您所见，第 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
