Значок с перекрытием на глифе в Bootstrap 3

Я пытаюсь создать настройку комментариев/уведомлений в бутстрапе и не могу получить правильное выравнивание.

Я собираюсь использовать довольно общий макет, как на этом скриншоте:

... но я не могу получить его для lignup. Здесь загрузочный файл моей попытки.

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;
  }

Ответ 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

Ответ 2

Для динамизма я хотел бы упомянуть использование 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%) было бы идеальным.

Ответ 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;
     -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 */

Совет. Возможно, было бы полезно сыграть с процентными значениями внутри квадратных скобок для лучшего результата. Кроме того, вы можете попробовать использовать много других эффектов, таких как 3D, вращение и т.д.