Bulma css navbar-item

时间:2018-02-20 09:18:24

标签: css bulma

在Bulma css navbar-item中我想有一个居中的图标,在这个图标下方有一些文字。

<nav class="navbar " role="navigation" aria-label="main navigation">
  <div class="navbar-menu navbar-end" id="navMenu">
    <a class="navbar-item">
      <p><i class="far fa-comment"></i></p>
      <p>Contact</p>
    </a>
  </div>
</nav>

Bulma将链接中的2个段落放在同一行上,这不是p标记的默认行为。显示:-webkit-box和display:navbar-item的flex属性似乎创建了这种行为,但我不确定我应该用它来覆盖它们?

1 个答案:

答案 0 :(得分:2)

这是因为flexbox。在.navbar项目上添加一个样式,如下所示:

<a class="navbar-item navbar-item-center-icon">
  <p><i class="far fa-comment"></i></p>
  <p>Contact</p>
</a>

.navbar-item-center-icon {
 flex-direction: column;
}