如何解决嵌套卡片，将卡片放入卡片中 - 引导卡片
我正在尝试在我的项目中制作嵌套卡片，所以基本上我有三张卡片。父级 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.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.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>
这是我理想的结果。但是，此图片是桌面视图中的屏幕截图。
解决方法
试试这个
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(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.2);
}
body {
background-color: #003366;
}<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="max-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="max-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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
