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

使用Grid CSS并查看How to achieve Responsive Design by using PrimeFaces

Primefaces响应问题panelGrid

1 个答案: