使用Bulma的.columns容器可自动实现等高列布局，子元素.column会随最高列等高，支持宽度类如is-one-third控制比例，并可通过is-gapless去除间隙。
用 Bulma 实现等高列布局非常简单，不需要额外写复杂的 CSS。Bulma 内置的 Flexbox 网格系统（基于 .columns 和 .column）天然支持等高列，只要把多个 .column 放在同一个 .columns 容器中即可。
使用 .columns 创建等高列
Bulma 的 .columns 是一个 Flex 容器，默认使用 Flexbox 布局，它的子元素 .column 会自动拉伸到相同高度。
这是第一列的内容。
内容较短。
这是第二列的内容。
内容比较长，会撑高整个行。
多几段文字来测试高度是否一致。
是的，它们会保持等高。
第三列，即使内容少，也会和最高的一列一样高。
上面代码中，三列的高度会自动对齐，以最高的那一列为准。
控制列宽比例
你可以通过给 .column 添加宽度类来设置不同比例的列，比如：
立即学习“前端免费学习笔记（深入）”；
九歌
九歌–人工智能诗歌写作系统
322 查看详情 
is-one-third：占 1/3 宽度 is-half：占一半 is-four-fifths：占 4/5 或者不设，让 Flex 自动分配空间
示例：两列布局，左侧窄，右侧宽
侧边栏
主内容区，更宽，且高度与侧边栏一致。
去除列间间隙（可选）
Bulma 默认在列之间加入间隙（gap）。如果你想要紧凑布局，可以添加 is-gapless 类：
没有间距的列高度依然相等
基本上就这些。Bulma 的 Flexbox 设计让等高列变得非常自然，不需要 JavaScript 或 hack 样式。只要结构正确，等高效果自动生效。
以上就是如何用css框架Bulma制作等高列布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1029207.html
微信扫一扫 
支付宝扫一扫 
