Web 抽象エディターは、画面サイズに応じてセル幅を % 値で設定するのに役立ちます。
ある画面サイズ用としてセルに指定された幅にあわせて、Bootstrap クラスが実行時にそのセルに割り当てられます。そのため、セル幅は最終的に Bootstrap クラスによって決まります。
場合によって、セルの幅を変更し、Boostrap で指定される範囲 (8%、17%、25%、33%、42%、50%、58%、67%、75%、83%、92%、100%) 以外の値を設定しなければならないことがあります。一般的ではありませんが、幅をピクセル単位で宣言する必要がある場合は、 [ max-width ] プロパティを使用します。
Bootstrap クラスのパディング値でも、同じことが起こります。既定では、クラスにゼロ以外のパディング値が使用されますが、以下に説明するように変更できます。
次の例を考えてみます。
中型および大型のデバイス (>=992px) で、1 つの行に 3 つの項目を表示する必要があるとします。この例では、最初のセルが幅の 67% を使用し、他の 2 つのセルが 8% を使用します。次の図は、これらの項目が表示されたレスポンシブテーブルと、このテーブル用の [ Responsive Sizes ] プロパティ (X Evolution 3) のダイアログを示しています。
行内の 2 番目の項目 (2 番目のセル) は幅の 8% を使用し、Boostrap クラスで指定されたパディングが割り当てられています。
次の図は実行時の設計を示しています。
既定の設定を変更する必要がある場合は、次の図に示すように、Cell クラスを定義してセルに割り当てます。
この場合は、テーマで 2 つのクラスが定義されており (ImageCartCell2 および nopadding)、エレメントの [ Cell Class ] プロパティと関連付けられています。
各クラスの定義は次のとおりです:
.ImageCartCell2
{
max-width: 64px;}
.nopadding
{
padding: 0 !important;}
これらの設定を行うと、次に示すような結果になります。
|