Css Primefaces响应问题panelGrid

我是CSS新手，对布局有意见

我有4个按钮要水平布置，除非它是移动的，在这种情况下，它们应该垂直堆放

我目前有：

<div class="ui-g-12 ui-md-12">
<div class="card">
<p:panel id="filter" header="Filter">

<p:panelGrid columns="4" styleClass="ui-panelgrid-blank"
                            layout="grid">                              
<p:commandButton/>
<p:commandButton/>
<p:commandButton/>
<p:commandButton/>
</p:panelGrid>
</div>
</div>

在桌面模式下，我不希望按钮拉伸到100%的屏幕，因为它们太宽（每个25%），所以我需要生成的代码是：

<div class="ui-panelgrid-cell null"><button id...></button></div>

但我得到的是：

<div class="ui-panelgrid-cell ui-grid-col-3"><button...></button></div>

这就是为什么这4个按钮各占屏幕宽度的25%

---

有谁能建议我如何保持按钮的响应性，但在桌面上，这4个按钮不占屏幕宽度的100%（每个25%）？

使用，也可以看到，我已经在这样做了，并且使用带有grid.css的Ultima主题，这就是为什么在移动设备中，按钮垂直堆叠，所以它是响应性的，正如我之前提到的，但在桌面上，我不想让4个拉长的按钮占据100%的屏幕。通过创建一个更匹配的选择器来覆盖样式（阅读css特性），你能在这里给我更多的指针吗？