0

我是 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%）的屏幕宽度？

4

1 回答 1

0

使用Grid CSS并查看如何使用 PrimeFaces 实现响应式设计

于 2017-01-12T18:42:34.697 回答