我正在使用bootstrap 4并尝试制作一个组件。 该组件有两个瓦片。 每个瓷砖由左边和右边的图标图像组成，有一个超链接。 桌面应以水平和垂直居中的方式显示瓷砖。 桌面一变移动，图像图标就应该堆叠在链接上，垂直居中。
null
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Service Header Example</title>
<style type="text/css">
.service-header-tile{
max-width: 397px;
height:60px;
}
.leftContent{
float: left;
width: 20%;
clear:both;
}
.rightContent{
float: left;width: 61%;height: auto;
}
@media only screen and (max-width: 767px){
.leftContent{
width:100%;
height:auto;
float:none;
clear: both;
text-align: center;
}
.rightContent{
clear:both;
width:auto;
height:auto;
}
}
</style>
</head>
<body>
<div class="container" style="background-color:#41173F">
<div class="row">
<div class="col-4 col-md-4">
<div class="service-header-tile containeer">
<div class="leftContent">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
<img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit "/>
</picture>
</div>
<div class="rightContent">
<a href="#">Play Virtual Applications</a>
</div>
</div>
</div>
<div class="col-4 col-md-4">
<div class="service-header-tile container">
<div class="leftContent">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
<img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit "/>
</picture>
</div>
<div class="rightContent">
<a href="#">Play Virtual Applications</a>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>null
虽然我发现了以下问题
谢谢，小蜜蜂
我建议您使用flex，它是在CSS3中引入的。
我在这里做了一个快速的小提琴:https://jsfiddle.net/hkx2OD3z/
您可以通过媒体查询在列和行之间更改弹性方向。
您可以在这里使用其他属性:https://yoksel.github.io/flex-cheatsheet/
