如何用css框架Bulma制作等高列布局-css教程-PHP中文网

如何用css框架Bulma制作等高列布局

P粉602998670

发布： 2025-10-05 22:44:02

原创

485人浏览过

使用Bulma的.columns容器可自动实现等高列布局，子元素.column会随最高列等高，支持宽度类如is-one-third控制比例，并可通过is-gapless去除间隙。

如何用css框架bulma制作等高列布局

用 Bulma 实现等高列布局非常简单，不需要额外写复杂的 CSS。Bulma 内置的 Flexbox 网格系统（基于 .columns 和 .column）天然支持等高列，只要把多个 .column 放在同一个 .columns 容器中即可。

使用 .columns 创建等高列

Bulma 的 .columns 是一个 Flex 容器，默认使用 Flexbox 布局，它的子元素 .column 会自动拉伸到相同高度。

<div class="columns">
  <div class="column">
    <p>这是第一列的内容。</p>
    <p>内容较短。</p>
  </div>
  <div class="column">
    <p>这是第二列的内容。</p>
    <p>内容比较长，会撑高整个行。</p>
    <p>多几段文字来测试高度是否一致。</p>
    <p>是的，它们会保持等高。</p>
  </div>
  <div class="column">
    <p>第三列，即使内容少，也会和最高的一列一样高。</p>
  </div>
</div>

登录后复制

上面代码中，三列的高度会自动对齐，以最高的那一列为准。

控制列宽比例

你可以通过给 .column 添加宽度类来设置不同比例的列，比如：

立即学习“前端免费学习笔记（深入）”；

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

is-one-third：占 1/3 宽度
is-half：占一半
is-four-fifths：占 4/5
或者不设，让 Flex 自动分配空间

示例：两列布局，左侧窄，右侧宽

<div class="columns">
  <div class="column is-one-quarter">
    <p>侧边栏</p>
  </div>
  <div class="column">
    <p>主内容区，更宽，且高度与侧边栏一致。</p>
  </div>
</div>

登录后复制

去除列间间隙（可选）

Bulma 默认在列之间加入间隙（gap）。如果你想要紧凑布局，可以添加 is-gapless 类：

<div class="columns is-gapless">
  <div class="column">没有间距的列</div>
  <div class="column">高度依然相等</div>
</div>

登录后复制

基本上就这些。Bulma 的 Flexbox 设计让等高列变得非常自然，不需要 JavaScript 或 hack 样式。只要结构正确，等高效果自动生效。

以上就是如何用css框架Bulma制作等高列布局的详细内容，更多请关注php中文网其它相关文章！