1

Bootstrap2.2.2を使用しているプロジェクトに取り組んでいます。その性質上、12列ごとに行を閉じないのが最も便利です。

<div class="container">
    <div class="row">
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        (...)
    </div>
</div>

この方法には欠点がありますか？これまでのところ、テスト中にChrome、Firefox、IE 9でのこのようなレイアウトに関する問題は見つかりませんでした。ただし、気付いている問題がある場合は、情報をいただければ幸いです（特に、古いもののレイアウトが壊れている場合）。ブラウザ、IE7以前は気にしませんが）。

4

2 に答える 2

7

注意すべき点の1つは、スパンの高さが異なる場合、3番目のスパンごとにクリアフィックスに相当するものがないため、コンテンツの順序がずれてしまう可能性があることです4。

この例については、 http：//jsfiddle.net/panchroma/czxJB/の2行目を参照してください。

ただし、これはいくつかのカスタムCSSで克服できます。この追加のCSSが適用されている3行目の結果を参照してください 

.row.multiple .span4:nth-child(3n+4) {  
clear:left;
}

幸運を！

于 2013-01-14T18:39:01.323 に答える
2

デビッドからの素晴らしい答え！これは答えから導き出され、すべての可能な行/スパンに拡張された私のcssです。これが役立つことを願っています

.row.multiple .span6:nth-child(2n+3), .row-fluid.multiple .span6:nth-child(2n+3) {  
    clear:left;
    margin-left: 0px;
}

.row.multiple .span4:nth-child(3n+4), .row-fluid.multiple .span4:nth-child(3n+4) {  
    clear:left;
    margin-left: 0px;
}

.row.multiple .span3:nth-child(4n+5), .row-fluid.multiple .span3:nth-child(4n+5) {  
    clear:left;
    margin-left: 0px;
}

.row.multiple .span2:nth-child(6n+7), .row-fluid.multiple .span2:nth-child(6n+7) {  
    clear:left;
    margin-left: 0px;
}
于 2013-04-19T12:12:28.733 に答える