html - Twitter Bootstrap を使用してこの単純なレスポンシブ レイアウトを行うには?

Question

これを見てください：

[削除]

ブラウザーのサイズを変更すると、1 行に 3 つのボックスが表示されていたのが、1 行に 1 つになりました。1に行く前に1行あたり2にする方法はありますか?

他の CSS グリッド フレームワークを使用している場合があるように、Twitter ブートストラップ レスポンシブ グリッドを使用することにした場合、レイアウト オプションが制限されているかどうかはわかりません (たとえば、幅 960px のデザインに制限されているものもあります)。

Answer 1

私は Zaid の注意書きが気に入っていますが、本当にこれを行う必要がある場合は、ここから始めましょう: Live example and jsfiddle

ページ レイアウトがより複雑になり、Bootstrap コンポーネントを追加するにつれて、snowball を使用してカスタム CSS に例外のリストを追加する必要があるため、単純にしておくとよいでしょう ;)

幸運を！

CSS

@media(min-width:481px) and (max-width:767px){

.row-fluid [class*="span"]{   /* for the above viewpoints, force spans to be 50% */ 
width:48.717948717948715%;

float:left;
}

.row-fluid .span12{    /* override so span12 is full width */
width:100%;
margin-right:0 !important;
}


.row-fluid [class*="span"]:first-child {
margin-left: 0;
 margin-right: 2.5109110747408616%;
}

.row-fluid [class*="span"]:last-child {
float:right;
}

}