0

ビューに表示されるオブジェクトのリストを作成しました。うーん、1行に3つか4つ表示したい。3 を表示するときは を使用しclass="span4"、4 を表示するときは を使用しますclass="span3"。ただし、div が をオーバーフローするspan12と、次のオブジェクトが次のように間違ったサイズで表示されます。

間違った表示

さて、最初の div のちょうど上に 4 番目の div を表示したいと思います。私のコードは次のようなものです：

<div class="span2">MENU</div>
<div class="span10 container-fluid">
    <div id="products" class="row-fluid"> 
    @foreach (Product product in Model)
    {
        <div class="span4 item-bordered text-center">
            <h3>@product.Name</h3>  
            <h6>@product.Description</h6>
        </div>
    }
    </div>
</div>

私の問題を再現する JSFiddle は次のとおりです: http://jsfiddle.net/Kiwanax/utPsh/

誰かが私を助けることができますか？ありがとう！！！

4

2 に答える 2

0

ブートストラップ グリッド システムがリストで使用するように設計されているかどうかはわかりません...代わりに div を使用してみます。

<div id="products" class="row-fluid">      
    <div class="span4 item-bordered text-center">
        <h3>Pelúcias Angry Birds</h3>  
        <h6>As mais lindas pelúcias dos pássaros mais queridos do momento.</h6>
    </div>

    <!--etc-->

</div>

編集:
また、スパンの合計が 16 になると、望ましくない結果が得られます。したがって、3span4秒または 4span3秒に固執します。

EDIT：
グリッドスパンにボーダーを追加すると、各要素の幅が2倍になるため、さらに問題が発生する可能性があります（ボーダー幅を1pxと仮定）。したがって、グリッド スパン div 内のネストされた div に境界線を配置します。

<div id="products" class="row-fluid">
    <div class="span4">
        <div class="item-bordered text-center">
            <h3>Pelúcias Angry Birds</h3>  
            <h6>As mais lindas pelúcias dos pássaros mais queridos do momento.</h6>
        </div>
    </div>

    <!--etc-->

</div>

編集：

Bootstrap グリッド システムは 12 を超えるスパンを処理するように設計されていないため、それを考慮して html の生成方法を変更する必要があります。

MVCを使用しているようです。Razor を使用していると仮定すると、次の行に沿って何かを実行する必要があります。

<div id="products">
    <div class="row-fluid">
    @{int counter = 0;}
    @foreach (var toy in toys) 
    {
        if (counter > 0 && counter % 3 == 0) <!--check if it's the beginning of the next row-->
        { 
            @:</div> <!--terminate previous row-->
            @:<div class="row-fluid"> <!--start a new row-->
        }
        <div class="span4">
            <div class="item-bordered text-center">
                <h3>toy.Name</h3>  
                <h6>toy.Description</h6>
            </div>
        </div>
        counter++;
    }
    </div>
</div>
于 2013-04-23T20:02:02.203 に答える