ブートストラップグリッドレイアウト：特定のセルが常に同じ行になるようにします。

Question

ブートストラップグリッドレイアウトを使用してさまざまなフォームを表示します。セルは幅（例えば、3つの列のうちの3つ）に割り当てられ、そのすべては構成可能である。問題はLabelとFieldの幅が別々に設定されていることです。例えば。 labelAは幅2、fieldAは幅4、labelBは幅2、fieldBは幅4です。この方法では、「2列」のレイアウトが表示されます：labelA-fieldA-labelB-fieldB。

しかし、ラベルとフィールドの幅を他の値に設定すると問題があります。たとえば、すべての行にまたがる場合です。ユーザーはラベルBの幅を4に設定し、フィールドBの幅を8に設定して行全体を取得することを期待します。しかし、この場合、最初の行ではlabelA-fieldA-labelB- [2列分の空白]、2行目ではfieldBが得られます。明らかに、意図した解決策は、labelA-fieldA- [6列分の空きスペース]とし、次の行のlabelB-fieldBとする。繰り返しますが、これはすべて設定可能なので、すべての場合にソリューションが必要です。

これらのセル（ラベルとフィールド）を強制的に破壊できないようにするには、完璧な解決策があります。それを行う方法を見つけることができません。

もう1つの方法は、width = label.width + field.widthのコンテナコンポーネントを作成することです。しかし、私はラベルとフィールドの幅を直接の親に対して相対的にしか設定できず、親の親に対する相対的な幅を設定する必要があるので、これらのコンテナのラベルとフィールドの幅を設定することに問題があります。レンダリング時にコンポーネントの列数を変更する方法があると聞きましたが、label.width + field.widthに列数を設定すると動作します。しかし、私が理解する限り、それは汚い解決策です。

コードはReactにあり、これはラベルとフィールドごとに生成されたものです。 InpCompはどのコンポーネントでも構いませんが、最後は問題ありません。 labelWidthとfieldWidthは設定によって設定されます。

const labelWidth = this.getLabelWidthFromConfiguration(); 
const fieldWidth = this.getFieldWidthFromConfiguration(); 

return (
    <div className={'component-container'}> 
    <div className={'col-md-${labelWidth}'}><b>{this.field.attributes.label}</b></div> 
    <div className={'col-md-${fieldWidth}'}> 
     <InpComp /> 
    </div> 
    </div>); 

これらのラベルとフィールドが常に同じ行に終わるようにするには、どうすればよいですか？

Answer 1

if-statementについてはどうですか？ ;）

あなたはこのような何かを行うことができます。

は

if (lableWidth + fieldWidth !== 6) { 
    fieldWidth = 12 - lableWitdh; 
} 

このソリューションは、唯一のケース（LA + FA = LB + FB = 6）のために動作します。 if/elseまたはswitch-caseを使用して、それぞれの条件を自分ので設定できます。

Troyer氏によれば、私たちはここでアイデアを発表したり、仕事をしたりするのではなく、コードの問題を解決するためにここにいます。次回は、あなたが立ち往生してコードを提供するまで、自分で問題を解決しようとするべきです。