Bulma level item高度过小及title、subtitle类p标签并排显示问题咨询

调整level item高度 #

Bulma的level组件默认高度由子内容自动撑开，可通过两种方式修改高度：

• 无需自定义CSS的方案：给.level-item添加Bulma内置内边距工具类，比如p-3、p-4，数值越大内边距越高，组件高度会同步提升，适合局部快速调整。
• 自定义固定高度方案：添加CSS规则设置最小高度，按需调整数值即可：

.level-item {
  min-height: 80px;
}

title与subtitle上下堆叠布局 #

二者横向并排的原因是父容器（通常为.level-item）默认采用flex横向布局，有两种修复方案：

方案1：添加块级包裹容器 #

将两个p标签套入普通div容器内，块级容器的子元素默认上下排列，无需额外修改样式：

<div class="level-item">
  <div>
    <p class="title">主标题</p>
    <p class="subtitle">副标题</p>
  </div>
</div>

方案2：修改flex布局方向 #

直接给.level-item添加Bulma内置的flex方向工具类is-flex-direction-column，将主轴改为垂直方向，子元素自动上下堆叠：

<div class="level-item is-flex-direction-column">
  <p class="title">主标题</p>
  <p class="subtitle">副标题</p>
</div>

如果需要调整两者间距，可给.subtitle添加mt-2/mt-3等margin-top工具类即可。

内容的提问来源于stack exchange，提问作者Noah Bergh