Question

我正在尝试实现以下目标：

，您可以看到我正在为此使用Bootstrap 4卡，问题是我真的不了解如何将图标/图像移出Cards标头的最佳方法是什么？我尝试了几个CSS位置技巧，但没有成功。目前，我有这个Demo

Answer 1

最好最好的方法是在图像顶部使用负边距的相对位置。

这里是一个例子：

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

Answer 2

由于我对引导程序不太熟悉，因此至少可以解释一下如何不使用引导程序。

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（将是底部的白卡）一样简单。我将以下样式应用于图像以正确定位。最后，它应如下所示：

Bootstrap 4将图像移出卡头容器

2 个答案: