3

私はTwitterBootstrapを使用しており、メディアクエリを使用した流動的なデザインを使用してレスポンシブデザインにしています。

これまでのところ、サンプルの2列レイアウトで「レスポンシブ」になるように設計を行っています。ただし、必要なのは、最小幅1200pxの後にサイドバー列を追加することです。

したがって、1024レイアウトに次のようなものがある場合：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
              .....
        </div>
        <div class="span4 last">
              ..sidebar junk..
        </div>
    </div>
</div>

効果的に次のようなものにするには、1200pxバージョンが必要です。

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6">
              .....
        </div>
        <div class="span3">
              ..sidebar junk..
        </div>
        <div class="span3 last">
              ..sidebar 2 junk..
        </div>

    </div>
</div>

またはその効果への何か。次に、ユーザーが1200px未満に縮小したら、その2番目のspan3を削除し、最初のspan3を再びspan4にします。私が求めているものの非常に複雑なバージョンについては、http：//www.smashingmagazine.com/を参照してください。画面の解像度を上げると、コンテンツにサイドバーが追加されます。

Bootstrapでこの効果をどのように達成しますか？

4

2 に答える 2

7

=少しのjQueryで非常に簡単に実行できます。

divにIDを追加し、準備ができたらスパンクラスとcssを追加/削除してサイズを変更します。

<div class="container-fluid">
  <div class="row-fluid">
    <div id="one">
      .....
    </div>
    <div id="two">
      ..sidebar junk..
    </div>
    <div class="span3" id="three">
      ..sidebar 2 junk..
    </div>
  </div>
</div>

＆

function sizing() {
  var windowwidth=$(window).width();
  if(windowwidth>=1200){
    $('#one').removeClass('span8').addClass('span6');
    $('#two').removeClass('span4').addClass('span3');
    $('#three').css('display','inline');
  } else {
    $('#one').removeClass('span6').addClass('span8');
    $('#two').removeClass('span3').addClass('span4');
    $('#three').css('display','none');
  }          
}
$(document).ready(sizing);
$(window).resize(sizing);

http://jsfiddle.net/baptme/9MYTZ/4/

于 2012-06-15T15:13:01.500 に答える
0

私もこれで苦労してきました。これをシミュレートするために、列スパンで遊ぶことができます。3列の場合はスパンを4（12/4 = 3）に設定し、4列の場合は3に設定します。

列の総数が多いほど、たとえば12ではなく24になると、より細かくなります。複数の画面サイズの小さい列と大きい列のスタイルを使用した以下の例を参照してください。

@grid-columns: 24; 

.small-column {
    .make-xs-column(12); // 2 small columns at xs size (24/2)
    .make-sm-column(6);  // 4 small columns at sm size (24/6)
    .make-md-column(4);  // 6 small columns at md size (24/4)
    .make-lg-column(3);  // 8 small columns at lg size (24/4)
}

.large-column {
    .make-xs-column(24);
    .make-sm-column(12);
    .make-md-column(8);
    .make-lg-column(6); 
}
于 2014-05-06T17:14:25.530 に答える