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

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

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

使用 .buttons 类创建按钮组

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


  
  
  

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

控制按钮组间距的方法

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

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



  
  

垂直排列按钮组

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


  
  
  

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

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