Bulma 中的换行符 css navbar-item
line breaks in Bulma css navbar-item
在 Bulma 内部 css 导航栏项目我想要一个居中的图标,并在该图标下方放置一些文本。
<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 将 link 中的 2 个段落放在同一行,这不是 p 标签的默认行为。 display: -webkit-box 和 display: navbar-item 的 flex 属性似乎造成了这种行为,但我不确定我应该用什么覆盖它们?
这是因为 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;
}
在 Bulma 内部 css 导航栏项目我想要一个居中的图标,并在该图标下方放置一些文本。
<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 将 link 中的 2 个段落放在同一行,这不是 p 标签的默认行为。 display: -webkit-box 和 display: navbar-item 的 flex 属性似乎造成了这种行为,但我不确定我应该用什么覆盖它们?
这是因为 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;
}