Bootstrap 3中字形上的重叠通知徽章答案

【问题标题】：overlap notification badge on glyph in Bootstrap 3Bootstrap 3中字形上的重叠通知徽章
【发布时间】：2014-07-10 12:58:05
【问题描述】：

我正在尝试在引导程序中创建评论/通知设置，但似乎无法正确对齐。

我将采用一个非常常见的布局，如此屏幕截图所示：

...但我不能让它成为lignup。 Here's a Bootply 我的尝试。

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：

.badge-notify{
   background:red;
   position:absolute;
   top:0px;
  }

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

试试这个：

/* 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>

引导层：http://www.bootply.com/7teIvGLIzY

【讨论】：

一个更“引导”的方法是使用<div class="btn-group">而不是container

【解决方案2】：

我的观点是transform 是完成这项任务的更好方法。但是，我为您提供了这些 sn-ps 以使这种方法有效：

    <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 */

提示：在 translate 的括号内使用百分比值以获得最佳结果可能很有用。此外，您还可以尝试使用许多其他效果，例如 3D、旋转等。

【讨论】：

【解决方案3】：

对于动态性，我想提一下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%);
}

这将使徽章刚好接触到按钮。根据您想要的重叠程度，减小 x 值。例如，对于一半的徽章 - transform: (-150%, -100%) 将是理想的。

【讨论】：