Выпуск карты Boostrap на небольших устройствах - PullRequest
Новая
       0

Выпуск карты Boostrap на небольших устройствах

0 голосов
/ 06 октября 2019

У меня проблема с маленькими девайсами с картой 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

Спасибо за вашу помощь.

1 Ответ

1 голос
/ 07 октября 2019

Вы видите это поведение, потому что вы использовали абсолютное число против свойства top против классов .team-card .card-body;то, что мы могли бы сделать, это назначить следующее: top:calc(100% - 89px);, что является полной высотой card-body, и мы удаляем 89px, который является высотой для card-title и card-text ...

Working фрагмент ниже: 

.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: calc(100% - 89px);
  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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...