Bulma CSS Navbar-Item中断线路

Question

在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 and Display：Navbar-Item的Flex属性似乎创造了此行为，但我不确定我应该用它们覆盖它们吗？

Answer 1

这是因为flexbox。在您的.navbar-Item上添加样式，这样：

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