1

メディアグリッドを使用する場合のTwitterブートストラップでは、行全体に4つのスパンがあり、ブラウザーを縮小すると、これらは小さくなり、最終的には4つの全幅の行が重なり合ってスタックします。これは問題ありませんが、ブレークポイントの1つで、代わりに2つの列として配置してから、最終的にテーマを1つとして配置したいと思います。つまり、デフォルトでは4列から1列になっているように見えますが、その間に2列に移動したいと思います。どうすればこれを達成できますか。

4

2 に答える 2

2

ブートストラップレスポンシブを使用していると思います。変更されていないバージョンを使用している場合は、span *クラスを持つすべてのdivが50％の幅を占める別のメディアクエリを作成するだけです。ブートストラップと完全に一貫性を保つために、gridGutterWidthもスタイルに組み込み、最初のタイプから左マージンを削除する必要があります。使用しているcss/less / sassに基づいて、メディアクエリの正しい構文を実行します。これはsassまたはscssの場合

始めるためのCSSのサンプルを次に示します。

@media (min-width: 794px) and (max-width: 1060px) {
div[class*="span"] {
    width: 48%;
    margin-left: 2%;
}
div[class="span"]:first-of-type {
    margin-left: 0;
}
}
于 2013-01-27T16:38:43.950 に答える
0

さて、あなたが達成したいのは、応答性を変えることです。そのためには、DMTinterによる上記のコメントで述べたように、メディアクエリ@mediaを使用する必要があります。

    /* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

これにより、同様のレスポンシブ幅を作成できる画面サイズごとにレイアウトを変更することができます。

お役に立てれば！

于 2013-01-27T16:50:46.263 に答える