html - 如何防止bootstrap label占用空间造成shift

Question

我有一个带有通知图标的导航栏。当有通知时，图标旁边会显示一个标签。但是，此标签也会导致容器变大，并且我的导航栏中的所有内容都会发生变化。我正在为我的导航栏使用 flexbox。

这是我的代码的一个基本示例:

html

<ul class="flex-nav">
  <li class="flex-item">
    link
  </li>
  <li class="flex-item">
    linklink
  </li>
  <li class="flex-item">
    <i class="fa fa-bell fa-lg flex-icon"></i>
    <span class="label label-danger label-as-badge">5</span>
  </li>
  <li class="flex-item">
    link
  </li>
  <li class="flex-item">
    linklinklink
  </li>
  <li class="flex-item">
    link
  </li>
</ul>

CSS

.flex-nav {
  display: flex;
  list-style: none;
  background-color: red;
  height: 56px;
  width: 300px;
  margin: 0 auto;
}

.flex-item {
  border: 1px solid black;
  text-align: center;
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
  align-items: center;
}

.flex-icon {
  text-decoration: none;
  align-items: center;
}

.label-as-badge {
  border-radius: 1em;
  position: relative;
  top: -10px;
  left: -10px;
}

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

.label:empty {
  display: none;
}


}

fiddle

https://jsfiddle.net/weuce4du/3/

您可以通过删除 5 并查看通知图标所在框的大小发生了什么变化来理解我的意思。

有没有办法使通知容器保持相同大小，使铃铛图标保持居中，并防止标签占用空间并导致导航栏发生偏移？我以为我可以使用 z-index 以便它位于所有内容之上，但它似乎不起作用。

更新:我唯一想到的就是在容器上设置最大宽度。该图标仍然会轻微移动，但不会导致任何其他导航链接移动。

Answer 1

是因为相对定位。您可以添加一个负边距，例如这个边距:-10px 到跨度。