能否在Bulma的level-item内放置columns组件并使其占满全宽？

原因说明 #

Bulma的.level-item默认是flex布局的子元素，默认仅自适应为内部内容的宽度，不会自动填充父级容器的可用宽度，因此嵌套在内的.columns组件也会被限制宽度，出现收缩的情况。

解决方案 #

给你使用的.level-item元素添加宽度100%的设置即可，你可以直接用内联样式，也可以使用Bulma内置的宽度工具类（如果你的Bulma版本支持is-fullwidth或w-100工具类，可直接添加对应类名）。

修改后的完整代码如下：

<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
  <div class="level">
    <!-- 给level-item添加width:100%的样式 -->
    <div class="level-item" style="width: 100%">
      <div class="columns">
        <div class="column is-1">
          hi
        </div>
        <div class="column is-2">
          hi2
        </div>
      </div>
    </div>
  </div>
</body>

</html>

补充说明 #

• 如果需要取消columns默认的列间距，可以给.columns添加is-gapless类
• 如果同一个level下有多个level-item，你可以给对应level-item添加is-flex-grow-1类让它自动填充剩余空间，替代固定的100%宽度设置

内容的提问来源于stack exchange，提问作者Kent Tong