2

これは、twitter ブートストラップの流体レイアウトを使用してコーディングされた私のマークアップです。

<div class="row-fluid">
  <div class="span4">Col4</div>
  <div class="span8">Col8</div>
</div>

これは、ランドスケープ モードで正常に動作しています。しかし、ポートレートではグリッドを変更したいです。たとえば、最初の div は 2 列を占有し、2 番目の div は 10 列を占有する必要があります。

<div class="row-fluid">
  <div class="span2">Col2</div>
  <div class="span10">Col10</div>
</div>

通常のlessファイルで新しいクラスを.row-colum {.span4;}として定義し、メディアクエリのorientation:portrait overwrite .row-column {.span2;}を使用することを考えました。しかし、コンパイルエラーが少なくなりました。

これは私がやろうと思ったことです

<div class="row-fluid">
  <div class="row-column">Col2</div>
  <div class="span10">Col10</div>
</div>

これを達成する方法はありますか？

4

1 に答える 1

2

LESS で動作させることができない/したくない場合は、いつでもサイズ変更イベントを探すようにフォールバックできます。

$(window).resize(function () {
    if ($(window).width() < 640) {
        $("#col1").removeClass("span4").addClass("span2");
        $("#col2").removeClass("span8").addClass("span10");
    } else {
        $("#col1").removeClass("span2").addClass("span4");
        $("#col2").removeClass("span10").addClass("span8");
    }
});
于 2012-10-15T20:07:03.833 に答える