24

ユーザーが最大 50 枚の写真をアップロードできるフォト アルバム アプリケーションがあります。写真に4枚の写真を並べて表示したい。フォト アルバムは動的であるため、ユーザーは ajax を介して写真を追加および削除できます。

DOM 要素と行を常に再調整する必要なく、セルが追加/削除される場合、ブートストラップ グリッドをどのように使用できますか?

たとえば、ユーザーが 5 つの写真を含む既存のフォト アルバムを読み込むと、ブートストラップ グリッドは次のようになります。

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
</div>

ユーザーが画像 #2 を削除すると、グリッドは次のようになります (2 番目の行がなく、5 つの要素が 4 番目の要素にシフトされます)

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

次に、ユーザーが 2 つの新しい画像を (ajax 経由で) 追加すると、新しい行が必要になり、さらに 2 つの列が必要になります。

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

ブートストラップ レスポンシブ デザインは行なしでこれを行うことができますか、それともフローティング div を使用する必要がありますか? これらの列はすべて ajax を介して追加/削除されることに注意してください (最初のページの読み込みを除く)。そのため、DOM (行/列) を操作しています。変更ごとに行/列を再計算するのは面倒です。

4

2 に答える 2

60

まず、質問に直接答えるには、すべての列を 1 つの行に配置するだけです。

<div class="row">
    <div class="col-md-3"> <img src="1"> </div>
    <div class="col-md-3"> <img src="2"> </div>
    <div class="col-md-3"> <img src="3"> </div>
    <div class="col-md-3"> <img src="4"> </div>
    <div class="col-md-3"> <img src="5"> </div>
    ...
    <div class="col-md-3"> <img src="50"> </div>
</div>

4 番目のアイテムごと (グリッドは 12 列で、3 列幅のグリッド = 4 列を使用しているため)。また、この手法では常に同じ高さの列が必要です。そうしないと、列が期待どおりに折り返されません。したがって、写真のサイズが異なっていて、固定の高さに収まるようにスケーリングしていない場合、問題が発生します。

上記に対して「違法」なブートストラップではありません。実際には、Bootstrap サイトの次の例のように、1 つの列に画面サイズ クラスごとに複数の列サイズを適用することで、Bootstrap サイトがこれを行っていることがわかります。

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>

上記が「極小」(-xs-) と見なされる場合、最初の行の最初の列は幅全体に広がり、2 番目の列は幅の半分しか広がりません。

2 行目でも同様のことがわかります。「極小」サイズでは、「505」幅の列が 3 つあるため、2 行になります。

また、列の行の高さが一致しない場合に列を Clearfix する方法の例を見ることができます。彼らは、clearfix に空の div を挿入することを推奨しています。

また、リストを使用することも検討しますが、考えすぎないことをお勧めします (Bootstrap を使用しているときにそうしています)。

この場合、次のように考えてみてください。

<ul id="image-list" class="row">
    <li class="col-sm-3"><img src="1"></li>
    <li class="col-sm-3"><img src="2"></li>
    ...
    <li class="col-sm-3"><img src="n-1"></li>
    <li class="col-sm-3"><img src="n"></li>
</ul>

それが役立つことを願っています！

乾杯

于 2013-10-26T16:21:19.143 に答える