4列

Question

私は4列流体レイアウトを有する：モバイルデバイス用

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span3">A</div> 
     <div class="span3">B</div> 
     <div class="span3">C</div> 
     <div class="span3">D</div> 
    </div> 
</div> 

[ A ][ B ][ C ][ D ] 

、ブートストラップが正常に動作しており、列別下いずれかをレンダリング：

[   A    ] 
[   B    ] 
[   C    ] 
[   D    ] 

しかし、タブレットの場合、2列2列を使用したいと考えています。

[  A  ][  B  ] 
[  C  ][  D  ] 

この動作はネイティブにブーtstrap？

Answer 1

私は、Zurb Foundation（http://foundation.zurb.com/docs/grid.php#threeBlockEx）がこの機能を提供していることを知りましたが、私はTwitter Bootstrapを使いたいと思います。だから、Foundationが使用する技術に基づいて、カスタムルールを追加することに成功しました。

@media (min-width: 768px) and (max-width: 979px) { 
    .row-fluid > [class*=span]:nth-child(2n+1) { 
     clear: both; 
     margin-left: 0; 
    } 
} 

Answer 2

タブレットに対応する@mediaクエリのスパンのCSSを上書きするだけで済みます。

ですから、このような何か試すことができます。もちろん

// Tablets & small desktops only 
@media (min-width: 768px) and (max-width: 979px) { 
    [class*=span] { 
    width: 50%; 
    } 
} 

を、調整がなされる必要があるかもしれません。パディングとマージンのために、幅は実際には50％ではありません。

Answer 3

Hmm。私はCSSでこれらのルールを試してみましたが、どちらも私のために働いていませんでした。 BS 2.0ではこれが欠けているのは残念です。私は彼らがBS 3.0でそれを追加することを願っています！

おかげで、

JKあなたはまた、列の幅をリセットする必要がエミリーの答えに追加

Answer 4

、

@media (min-width: 768px) and (max-width: 979px) { 
    .row-fluid > [class*=span]:nth-child(2n+1) { 
     clear: both; 
     margin-left: 0; 
    } 

    .row-fluid .span3 { 
     width: 48.61878453038674%; 
    } 
}