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>

デスクトップ モードでは、ボタンが幅が広すぎる (各 25%) ため、ボタンが画面の 100% に収まるように引き伸ばされたくないので、必要な生成コードは次のとおりです。

<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 に答える