CSS Bootstrap 3 中字形上的重叠通知徽章
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23790721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overlap notification badge on glyph in Bootstrap 3
提问by Shawn Taylor
I'm trying to create a comment/notification setup in bootstrap, and can't seem to get the alignment right.
我正在尝试在引导程序中创建评论/通知设置，但似乎无法正确对齐。
I'm going for a pretty common layout as in this screenshot:
我将采用非常常见的布局，如此屏幕截图所示：
...but I can't get it to lignup. Here's a Bootplyof my attempt.
......但我无法让它成为 ligup。这是我尝试的 Bootply。
HTML:
HTML：
<div class="container">
<button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
<span class="glyphicon glyphicon-comment"></span>
</button>
<span class="badge badge-notify">3</span>
</div>
CSS:
CSS：
.badge-notify{
background:red;
position:absolute;
top:0px;
}
回答by dmullings
Try this:
尝试这个：
/* CSS used here will be applied after bootstrap.css */
.badge-notify{
background:red;
position:relative;
top: -20px;
left: -35px;
}
<div class="container">
<button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
<span class="glyphicon glyphicon-comment"></span>
</button>
<span class="badge badge-notify">3</span>
</div>
Bootply: http://www.bootply.com/7teIvGLIzY
Bootply：http: //www.bootply.com/7teIvGLIzY
回答by Alexander Gorg
I'm sharing the point of view that transformis a better way to do this task. However, I offer you these snippets to make this approach work:
我分享的观点是，转换是完成此任务的更好方法。但是，我为您提供了这些片段以使这种方法起作用：
<div class="container">
<button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
<span class="glyphicon glyphicon-comment"></span>
</button>
<span class="badge badge-notify">3</span>
</div>
.badge-notify{
background:red;
position:relative;
-moz-transform: translate(-100%, -100%); /* For Firefox */
-ms-transform: translate(-100%, -100%); /* for IE */
-webkit-transform: translate(-100%, -100%); /* For Safari, Chrome, iOS */
-o-transform: translate(-100%, -100%); /* For Opera */
Tip: it might be useful to play with percentage values inside translate's brackets for the best result. Moreover, you can try using many other effects like 3D, rotating and so on.
提示：在翻译括号内使用百分比值以获得最佳结果可能很有用。此外，您可以尝试使用许多其他效果，例如 3D、旋转等。
回答by Схирисх Шреста
For dynamism, I'd like to mention the usage of transforminstead of relying on trial/error of pixels (which might still be of your use, depending on the use case)
对于动态性，我想提到使用transform而不是依赖像素的试验/错误（这可能仍然有用，具体取决于用例）
<div class="container">
<button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
<span class="glyphicon glyphicon-comment"></span>
</button>
<span class="badge badge-notify">3</span>
</div>
.badge-notify{
background:red;
position:relative;
transform: (-100%, -100%);
}
This will position the badge just touching to the button. Depending on how much overlapping you want, decrease the x value. eg., for half of the badge - transform: (-150%, -100%)would be ideal.
这将定位刚刚接触按钮的徽章。根据您想要多少重叠，减少 x 值。例如，对于徽章的一半 -transform: (-150%, -100%)将是理想的。
