我一直在尝试在我的网站上的“个人资料图片”顶部添加一个通知和消息按钮，我的样式有点有趣。现在我似乎无法弄清楚如何将这个带有字形图标的跨度放在它附近，并且仍然让它响应。
这是我想要的图片:PICTURE
这是我目前拥有的图片:PICTURE2
这是当前设置:
HTML
<div class="col-xs-12 profile-preview">
<img id="profile-picture" src="assets/person.png">
<span id="message-button" class="glyphicon glyphicon-comment"></span>
</div>
CSS
#message-button{
position: relative;
border-radius: 50%;
border: 5px solid green;
background-color: green;
我根本不知道如何将字形注释范围移动到图像，并仍然使其响应。
最佳答案
在一个文件中构建它然后输入几十行解释对我来说更容易。重点是让 bootstrap 为您完成对齐和居中方面的所有工作。
我简单地使用了一个 css 类 col-xs-12 作为个人资料图像，然后你只需启动一个新的 Bootstrap row 和 2 div类 col-xs-6 col-sm-6 col-md-6 col-lg-6 的容器。这始终为您提供 2 个相等的框。其余的，为按钮和图标设计样式是一件容易的事。
我希望这有助于您理解这个概念，您可以将这段代码复制/粘贴到一个 HTML 文件中并查看结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Profile Image with Button</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
background: #3D3A3A;
}
.profile-preview {
/* this centers all child elements */
text-align: center;
margin-top: 100px;
background: none;
padding: 20px;
}
.profile-picture {
position: relative;
top: 0;
}
.profile-buttons {
background: #272424;
width: 100px;
height: 100px;
font-size: 3em;
border: 0;
border-radius: 50%;
}
.glyphicon {
position: relative;
top: 5px;
color: #D9D9D9;
}
/* Correction of the icon */
.glyphicon-option-vertical {
margin-left: 6px;
}
/* the green message dots */
.number-of-messages {
position: absolute;
top: -5px;
background: #8DAE00;
color: #D9D9D9;
font-size: 14px;
padding: 5px;
border-radius: 14px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 profile-preview">
<img class="profile-picture img-circle" src="http://placekitten.com/262/262/">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<button class="profile-buttons" id="message-button">
<span class="glyphicon glyphicon-comment"></span>
<span class="number-of-messages">3</span>
</button>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<button class="profile-buttons" id="comment-button">
<span class="glyphicon glyphicon-option-vertical"></span>
<span class="number-of-messages">2</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</body>
</html>
为了改变不同设备上按钮的距离/宽度，只需改变单个组的宽度类，使它们更近或更宽。 *-offset-* 也很有帮助。
您还可以使用类 img-responsive 为您的图像提供 width:100%;height:auto 响应性属性。
关于html - 自举 |将图像/跨度放在图像之上，并且仍然响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38885441/