如何使用Bulma实现按钮响应式排布：桌面端水平、移动端垂直

解决方案 #

无需自定义CSS，直接使用Bulma原生内置类即可实现需求，推荐两种实现方式：

方式一：使用原生响应式按钮容器（最简方案）

Bulma自带的.buttons容器默认就实现了宽屏水平排列、窄屏自动垂直堆叠的适配效果，直接替换原有按钮组外层结构即可：

<div class="buttons">
  <a class="button is-link" href="#">
    Blah blah button 1
  </a>
  <a class="button is-link" href="#">
    Blah Blah button 2
  </a>
  <button class="button is-link" href="#">
    Blah blah button 3
  </button>
</div>

方式二：保留原有field表单结构

如果需要保留field相关结构，给外层的is-grouped添加is-grouped-multiline类，同时给每个control和button添加移动端全宽类即可：

<div class="field is-grouped is-grouped-multiline">
  <p class="control is-fullwidth-mobile">
    <a class="button is-link is-fullwidth" href="#">
      Blah blah button 1
    </a>
  </p>
  <p class="control is-fullwidth-mobile">
    <a class="button is-link is-fullwidth" href="#">
      Blah Blah button 2
    </a>
  </p>
  <p class="control is-fullwidth-mobile">
    <button class="button is-link is-fullwidth" href="#">
      Blah blah button 3
    </button>
  </p>
</div>

内容的提问来源于stack exchange，提问作者Paul Gowder