Primefaces reagieren Problem panelGrid

Question

Ich bin neu in CSS und habe ein Problem mit Layouts.

Ich habe 4 Tasten horizontal auszulegen, es sei denn, es ist mobil, in diesem Fall sollten sie vertikal gestapelt werden.

Ich habe derzeit:

<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> 

Im Desktop-Modus, ich habe nicht die Tasten will gestreckt 100% des Bildschirm zu passen, da sie zu groß sind (jeweils 25%), so dass der generierte Code Ich brauche ist:

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

aber ich bekommen, was ist:

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

weshalb die 4 Tasten jeweils nehmen 25% der Bildschirm widt ist h.

Kann mir bitte jemand vorschlagen, wie ich Tasten reagieren kann, aber die 4 Tasten nicht 100% (je 25%) der Bildschirmbreite im Desktop nehmen?

Answer 1

Verwenden Grid CSS und auch How to achieve Responsive Design by using PrimeFaces