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

Question

我试图在bootstrap中创建评论/通知设置，但似乎无法正确对齐。

我想要一个非常常见的布局，如截图所示：

...但我不能把它拿到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;
  }

Answer 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>

Bootply：http://www.bootply.com/7teIvGLIzY

Answer 2

我认为transform是执行此任务的更好方法的观点。 但是，我提供了这些片段以使这种方法有效：

const Foo &myFoo = FuncBar();

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

Answer 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%)将是理想的。