如何在CSS中使用Bulma制作按钮组排列_Bulma button-group类控制间距-css教程-PHP中文网

如何在CSS中使用Bulma制作按钮组排列_Bulma button-group类控制间距

P粉602998670

发布： 2025-11-26 17:15:09

原创

762人浏览过

Bulma 使用 .buttons 类实现按钮组排列，通过组合容器与按钮类控制间距。默认使用 .buttons 水平排列按钮并保留适中间距；添加 .has-addons 实现紧凑排列，适用于按钮紧贴场景；结合 mx-2、mx-4 等间距工具类可自定义按钮间隔；通过 are-vertical 类实现垂直排列，适用于移动端或侧边栏布局。该方案灵活简洁，满足多种按钮组合需求。

如何在css中使用bulma制作按钮组排列_bulma button-group类控制间距

在 Bulma 中，并没有内置的 button-group 类，但你可以通过组合 Bulma 提供的容器元素和按钮类，轻松实现按钮组排列并控制间距。Bulma 推荐使用 .buttons 这个类来包裹多个按钮，形成一组水平排列的按钮。

使用 .buttons 类创建按钮组

.buttons 是 Bulma 中用于组合多个按钮的标准方式。它会自动将内部的按钮水平排列，并设置合适的间距。

<div class="buttons">
  <button class="button is-primary">保存</button>
  <button class="button is-info">提交</button>
  <button class="button is-danger">删除</button>
</div>

登录后复制

这样三个按钮会水平排列，默认有轻微的间距（由 Bulma 的 margin 控制）。

控制按钮组间距的方法

Bulma 提供了多种方式来调整按钮之间的距离：

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

小艺

华为公司推出的AI智能助手

549

查看详情

默认间距：直接使用 .buttons 会有适中的间距。
紧凑排列：添加 .has-addons 类可以让按钮紧贴在一起，常用于输入框+按钮组合。
大间距：结合 Bulma 的间距工具类，如 mx-2、mx-4 等，自定义外边距。

<!-- 紧凑按钮组 -->
<div class="buttons has-addons">
  <button class="button is-success">上一步</button>
  <button class="button is-success">下一步</button>
</div>
<p><!-- 自定义大间距 -->
<div class="buttons my-1">
<button class="button mx-4">选项1</button>
<button class="button mx-4">选项2</button>
<button class="button mx-4">选项3</button>
</div></p>

登录后复制

垂直排列按钮组

如果你希望按钮垂直排列，可以加上 are-vertical 类：

<div class="buttons are-vertical">
  <button class="button">上传</button>
  <button class="button">下载</button>
  <button class="button">分享</button>
</div>

登录后复制

这在移动端或侧边栏中非常实用。

基本上就这些。Bulma 虽然没有叫 button-group 的类，但 .buttons 加上修饰类就能满足大多数按钮排列需求，灵活又简洁。

以上就是如何在CSS中使用Bulma制作按钮组排列_Bulma button-group类控制间距的详细内容，更多请关注php中文网其它相关文章！