我正在尝试在我的项目中做嵌套卡片，所以基本上我有三张卡片。父母一个Research Dashboard，第二个持有类别 ex。Recently Added Research最后，第三个或third card包含图像/卡片标题和按钮的。但是，在移动浏览器上查看时遇到了麻烦。正如您在图像中看到的那样，第三张卡片一直延伸到第一张我不喜欢的卡片，第三张卡片应该只转到第二张卡片Recently Added Research。
我试过重新调整卡片的宽度，但是每当我在桌面浏览器上查看它时它就会被破坏，这是我不喜欢的。
<style>
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 0 auto;
float: none;
margin-bottom: 10px;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
body {
background-color: #003366;
}
</style>
</head>
<body>
<div class="container-fluid" style="padding-top: 50px;">
<div class="card">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Research Dashboard
</div>
<div class="card-body">
<div class="container-fluid" style="padding-top: 50px;">
<div class="row">
<div class="col">
<div class="card h-100">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Recently Added Research
</div>
<div class="card-body">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="admin/files/Images/pagenotfound.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Card title</h5>
<button class="btn btn-info justify-content-start">View </button>
<button class="btn btn-info align-items-end">View </button>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="admin/files/Images/pagenotfound.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Library Management System</h5>
<p class="card-text">Date added: <span>May 23, 2021</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这是我理想的结果。但是，此图像是桌面视图中的屏幕截图。
