1

ブートストラップのカスタマイズを開始しましたが、これまでのところ、次のテンプレートに非常によく似たものがあります。

http://twitter.github.com/bootstrap/examples/fluid.html

しかし、3つのspan4を使用する代わりに、4つのspan3を使用しています。ブラウザが一定の幅に達したら、3つのspan3が必要です。次に、別の幅で、2つのspan3。

ストレートCSSでこれを行う方法はありますか？

4

4 に答える 4

1

.span3sの幅を.span2、メディア クエリ内の の幅に単純に減らすことができます。

/* Bootstrap defaults: */
.span3 {
    width:270px;
}

.span4 {
    width:370px;
}

@media screen and (max-width: 1024px) and (min-width: 767px) {
    /* Decreased span4 size within media query. */
    .span4 {
        width:270px;
    }
    ...
}
于 2013-03-21T18:59:42.373 に答える
0

jQuery / javascriptを使用してそれを行う方法は次のとおりです。「.colElement」は、影響を与えたい各 .span* 要素です。ニーズに合わせてウィンドウ幅のブレークポイントを調整するだけです。

Twitter ブートストラップ 2.* に基づく

function arrangeColumns(tile, numColsLG, numColsMED, numColsSM){
    $(tile).removeClass('first');
    var colSize = 0;
    var windowWidth = $(window).width();
    switch(numColsLG) {
        case 2: colSizeLG = 6; break;
        case 3: colSizeLG = 4; break;
        case 4: colSizeLG = 3; break;
        case 5: colSizeLG = 3; break;
        case 6: colSizeLG = 2; break;
    }
    switch(numColsMED) {
        case 2: colSizeMED = 6; break;
        case 3: colSizeMED = 4; break;
        case 4: colSizeMED = 3; break;
        case 5: colSizeMED = 3; break;
        case 6: colSizeMED = 2; break;
    }
    switch(numColsSM) {
        case 2: colSizeSM = 6; break;
        case 3: colSizeSM = 4; break;
        case 4: colSizeSM = 3; break;
        case 5: colSizeSM = 3; break;
        case 6: colSizeSM = 2; break;
    }

    if( windowWidth > 1200){
        $(tile).removeClass('span' + colSizeMED + " " + 'span' + colSizeSM);
        $(tile).addClass('span' + colSizeLG);
        $(tile + ':nth-child('+numColsLG+'n+1)').addClass('first');     
    } else if( windowWidth < 1200 && windowWidth > 900) {
        $(tile).removeClass('span' + colSizeLG + " " + 'span' + colSizeSM);
        $(tile).addClass('span' + colSizeMED);
        $(tile + ':nth-child('+numColsMED+'n+1)').addClass('first');        
    } else {
        $(tile).removeClass('span' + colSizeLG + " " + 'span' + colSizeMED);
        $(tile).addClass('span' + colSizeSM);
        $(tile + ':nth-child('+numColsSM+'n+1)').addClass('first');     
    }
}       


/* Initialize */
arrangeColumns('.colElement', 3, 2, 2);
/* Call on window resize  */
$(window).resize(function() {
    arrangeColumns('.colElement', 3, 2, 2);
});
于 2013-10-06T15:00:21.103 に答える
0

最近、プロトタイプ用にこれが必要になりました。3 つの汚​​い解決策を思いつくことができますが、どれも本当に完璧ではなく、製品コードに実装するのに十分なものではありません。ただし、単純な静的 Web サイトで必要な場合や、プロトタイプを使用して何かをデモする場合は、すべて正常に機能します。

  1. 2 つのシナリオをコーディングします。1 つは 4 列、もう 1 つは 3 列です。@media クエリで必要なものを表示/非表示にします。(ブートストラップのユーティリティ クラスを使用します)。

  2. いいえに似ています。1 ですが、乱雑ではありません。2 つの異なるシナリオをコード化するのではなく、HTML マークアップを動的に変更します。いくつかのクラスを削除し、特定の幅で新しいクラスを追加する単純な JS/Jquery スクリプトを配置します。いくつかの [div class="row"] を破棄し、その場で新しいものを作成して、連続するアイテムの数を変える必要があるかもしれません。

  3. このセクションのグリッドを無視し (可能であれば)、アイテムをハードコーディングします。幅を修正して、十分なスペースがない場合に改行を開始するか、パーセンテージを使用して @media クエリで特定の幅をハードコードすることができます。いつでもすべての列を使用して、ハードコードされた項目を行の中に入れることができます (例: 12 列すべてをコンテナーとして使用)。

  4. ボーナス - Isotope ( http://mpezzi.github.io/bootstrap_isotope/ ) または Mansonry http://masonry.desandro.com/を使用して効果を達成します。

表示したい特定のブレークポイントで行にいくつのアイテムが表示されるかを制御できると非常に便利ですが、これにはブートストラップを再考する必要があります...おそらく彼らはそれを理解し、アドオンなどとして追加するでしょう.. . 現時点では、これがブートストラップのデフォルト クラスでどのように機能するのか考えることさえできません...

于 2014-01-14T16:58:01.730 に答える