Question

我对boostrap卡上的小植物有疑问。我正在使用悬停效果来使内容滑动。但是在小型设备上，内容正在切割图像。我真的不知道如何使用绝对位置在图像之后立即开始内容。我只想查看名称和标题。鼠标悬停时，其余内容会以幻灯片的形式显示。

.team-card {
border:0!important;
border-radius:5px!important;
overflow:hidden!important;
}

.team-card .card-body .card-title,.team-card .card-body .card-text {
text-align:center;
margin:0;
}

.team-card .card-body {
position:absolute;
width:100%;
height:100%;
left:0;
top:255px;
background-color:#fff;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}

.team-card .card-body p {
line-height:1.6em;
}

.team-card:hover .card-body {
top:0;
}

.team-card .card-body .card-text {
margin-bottom:15px;
}

<html>
<head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="card team-card">
  <img src="https://png.pngtree.com/png-vector/20190704/ourlarge/pngtree-vector-user-young-boy-avatar-icon-png-image_1538408.jpg" class="card-img-top" alt="">
  <div class="card-body">
    <h5 class="card-title">John Doe</h5>
    <p class="card-text">Business Director</p>
    <p>Board member (core-team) previous Director-Business Development at EM6 and earlier at Syncada.</p>
  </div>
</div>
</body>
</html

感谢您的帮助。

Answer 1

之所以会出现这种现象，是因为您对类<span class="heading" name="fieldName" ngDefaultControl [(ngModel)]="collection.collectedCount"></span> of {{ collection.items.length || '0' }}的{{1}}属性使用了绝对数；我们可以做的是分配以下内容：top是.team-card .card-body的完整高度，我们删除了89px，它是top:calc(100% - 89px);和card-body的高度...

下面的工作代码段：

card-title

card-text

小型设备上的Boostrap卡问题

1 个答案: