0

私がやりたいのは、Twitterのブーストラップを使用した製品のレスポンシブリストです...

20 個の製品のリストがあるとします。

それらがサイトの幅全体にまたがることを望みます (デフォルトでは 940 で、幅は広くなりません)。したがって、この (デフォルトの) ケースでは、4 つの製品を続けて表示したいと思います。次のように行われます:

<div class="row">
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
</div>

<div class="row">
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
    <div class="span3 product">.....</div>
</div>

...

全て大丈夫。しかし、私がやりたいのは、誰かがページを縮小すると、この製品が縮小するということです...そしてそれも機能します...

ここまでは順調ですね

サイトの幅が 640 未満の場合は、それが必要です。1 行に 3 つの製品のみを表示します...そして、1 行に 1 つの製品よりも <480 の場合...

これが厄介なところです...そして、HTMLマークアップの行ごとに4つの製品があるので、DOMをJSで再配置する必要がありますよね？したがって、次のようになります....

<div class="row">
     <div class="span4 product">.....</div>
     <div class="span4 product">.....</div>
     <div class="span4 product">.....</div>
 </div>

 <div class="row">
     <div class="span4 product">.....</div>
     <div class="span4 product">.....</div>
     <div class="span4 product">.....</div>
 </div>

 ...

より良い方法はありますか？

このトピックについてよく議論し、説明している良い記事を教えていただけませんか?

編集：

もう1つ....ブートストラップは、連続したスパン間の左右のマージンを自動的に行います。行間に同じマージンを適用するにはどうすればよいですか?

4

1 に答える 1

1

これは、Bootstrap のスパンを使用しないことで実現できます。

左に浮いているすべてのアイテムを含む 1 つの span12 を用意するだけです。

このレベルで幅が 25% になるように設定します。

次に、メディア クエリを使用して、最大幅 640 で幅 33%、最大幅 480 で幅 100% に設定します。正常に動作するはずです。

于 2013-03-21T11:27:46.987 に答える