Bootstrap 4 将图像移出卡片标题的容器答案

【问题标题】：Bootstrap 4 move image out of the card header's containerBootstrap 4 将图像移出卡片标题的容器
【发布时间】：2018-08-19 18:11:31
【问题描述】：

我正在尝试实现这样的目标：

如您所见，我为此使用了 Bootstrap 4 卡，问题是我真的不明白如何将图标/图像移出 Cards 标题的最佳方法是什么？我尝试了几个 css 位置技巧，但没有成功。目前我有这个Demo

【问题讨论】：

链接到可能的解决方案之一（也许）-codepen.io/bubblesphere/pen/QEVqyR

标签： css sass bootstrap-4

【解决方案1】：

可能最好和最干净的方法是在图像顶部使用具有负边距的相对位置。

这是一个例子：

<img src="/images/my_image.png" style="position: relative; margin-top: -31px;">

【讨论】：

【解决方案2】：

由于我对 bootstrap 不太熟悉，所以我至少可以解释一下如何在没有 bootstrap 的情况下进行操作。

body {
background-color: #e6e6e6;
margin: 0;
padding: 0;

}
#container {
  height: 300px;
  width: 200px;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
  
}
#container #bottom-card {
  background-color: white;
  height: 200px;
  width: 100%;
  padding-top: 50px;
}
#container img {
  width: 90%;
  transform: translateY(50px);
  margin-left: 10px;
  
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">



<img src="http://4.bp.blogspot.com/-WasxwVSbP9o/U2iH8PGuHMI/AAAAAAAADlw/igcKXRFaZ1k/s1600/clio_car-vector.png"></img>


<div id="bottom-card">

Content
</div>

</div>




</body>
</html>

这就像创建一个容器来保存所有内容一样简单，然后在容器内创建一个 div，它将是底部的白色卡片。我将以下样式应用于图像以正确定位它。最后应该是这样的：

【讨论】：