Primefaces 响应问题面板网格

Question

我是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%）？

Answer 1

使用网格 CSS，另请参阅如何使用 PrimeFaces 实现响应式设计