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个按钮占用屏幕WIDT的25％ H。

任何人都可以请建议我如何保持按钮响应，但4个按钮并不占用100％（每个25％）的屏幕宽度时，在桌面？

Answer 1

使用Grid CSS也看到How to achieve Responsive Design by using PrimeFaces