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


}

小提琴

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

你可以通过删除5来看看我的意思，看看通知图标所在框的大小会发生什么。

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

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

Answer 1

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

如何防止bootstrap标签占用空间并导致移位

1 个答案: