css - Primefaces 响应式问题 panelGrid

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>

在桌面模式下，我不希望按钮拉伸(stretch)以适应 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