1

CMSアプリでTwitterBootstrapグリッドシステムを使用しています。

ユーザーがページを作成すると、行に任意の数の列を追加できます。次の行について考えてみます。

<div class="span9 row">
    <div class="span5">span5</div>
    <div class="span4">span4</div>
</div>

私がやりたいのは、ユーザーが行を設定して、その幅を列内の列に均等に分散できる機能を追加することです。

したがって、span5およびspan4クラスはオーバーライドされます。これは基本的にテーブル行のように動作しますが、行を作成するのはハッキーだと思いますdisplay: table-row。おそらく、TwBootstrapグリッドのレスポンシブ機能を台無しにするでしょう。

私が避けたいのは、幅の各組み合わせを次のように定義することです。

<div class="span9 row shared child-count-2">
    <div class="span5">span5</div>
    <div class="span4">span4</div>
</div>

そしてCSSでは：

.row.span9.shared.child-count-2 > div {
    width: 340px;
}

私はすでにLESSforCSSを使用しているので、これを機能させることができる便利な計算があるかもしれないと思いました。

問題は、50％の幅を指定すると、のが考慮されないこと20pxですmargin-left。したがって、行の幅から各列の20pxを引いたものを取得する必要があります。次に、残りの幅を列数で割ります。

また、JavaScriptの使用は避けたいと思います。ビューの99％をレンダリングしてから、スクリプトで調整を行うのは好きではありません。スクリプトの実行にわずかな遅延が発生した場合、ユーザーにはレイアウトがちらつくのがわかります。良くない。

それで、LESS / CSSからこれを行う方法はありますか？

4

1 に答える 1

0

LESSを使用してそれを実現できます。LESS を使用すると、バックティックにラップする JavaScript 式の評価を使用できます。

@var: `"hello".toUpperCase() + '!'`;

document.getElementById('myId').widthしたがって、要素の幅などを取得するようなものも使用できます..ここlesscss.orgをチェックして、「JavaScript評価」セクションに移動してください。

さらにサポートが必要な場合は、お尋ねください。:)

于 2012-06-04T10:54:54.360 に答える