我有一个设计，我正在使用具有重叠卡片的 Bootstrap 进行编码。我的布局可以正常工作(在 jQuery 的帮助下)，但顶部卡片上的文本被推到底部卡片的一侧。
我对如何获得顶级卡片内容感到困惑。 (即 XXXs)在各自的顶牌中正确对齐。
这是今天的截图。
我希望它看起来像这样:
代码如下:
<!DOCTYPE html>
<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Overlap</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
background-color: #81DFE8;
}
.background-card {
background: #EFEFEF;
background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
margin-top: 60px;
padding: 0 30px;
border-radius: 8px;
box-shadow: 6px 6px 6px #404040;
z-index:-1;
}
.card {
background: #EFEFEF;
margin: 15px 30px;
padding: 30px 75px 45px 50px;
border-radius: 8px;
box-shadow: 6px 6px 6px #404040;
}
#card-entity-header {
padding: 30px 0;
}
.card-title {
font-size: 32px;
}
.card-subtitle1 {
font-size: 24px;
}
.card-subtitle1 small {
font-size: 80%;
font-style: italic;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-7 background-card">
<div id="card-entity-header" "="">
<div class="card-title">Title</div>
<div class="card-subtitle1">Sub-Title</div>
</div>
<div id="page-cards-background">
<div> </div>
</div>
</div>
<br><br>
<div id="page-cards">
<div class="card">
xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>
</div>
<div class="card">
xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>
888<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$("#page-cards").css("padding-top", 60 + parseInt($("#card-entity-header").height()));
$("#page-cards-background").height( parseInt($("#page-cards").height()) + 45);
</script>
</body></html>
最佳答案
我尝试对 HTML 进行一些更改。检查一下:https://jsfiddle.net/hLs7sppd/
body {
background-color: #81DFE8;
}
.background-card {
background: #EFEFEF;
background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
margin-top: 60px;
padding: 0 30px;
border-radius: 8px;
box-shadow: 6px 6px 6px #404040;
z-index: -1;
}
.card {
background: #EFEFEF;
margin: 15px 30px;
padding: 30px 75px 45px 50px;
border-radius: 8px;
box-shadow: 6px 6px 6px #404040;
}
#card-entity-header {
padding: 30px 0;
}
.card-title {
font-size: 32px;
}
.card-subtitle1 {
font-size: 24px;
}
.card-subtitle1 small {
font-size: 80%;
font-style: italic;
white-space: nowrap;
}<div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-7 background-card">
<div id="card-entity-header">
<div class="card-title">Title</div>
<div class="card-subtitle1">Sub-Title</div>
</div>
<div id="page-cards-background" style="z-index: 1; height: 687px;">
<div id="page-cards" style="z-index: 999;">
<div class="card">
xxx
<br>xxx
<br>xxx
<br>xxx
<br>xxx
<br>xxx
<br>xxx
<br>
</div>
<div class="card">
xxx
<br>xxx
<br>xxx
<br>xxx
<br>xxx
<br>xxx
<br>xxx
<br> 888
<br>xxx
<br>xxx
<br>xxx
<br>xxx
<br>xxx
<br>xxx
<br>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
</div>
</div>关于jquery - Bootstrap 中的故意重叠卡片 - 文本被推到一边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45174382/