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