0

Bootstrap のレスポンシブ スタイル シートを使用しており、12 列にまたがる div に 4 つの正方形があるため、|3|3|3|3| です。

これをモバイル ブラウザで表示すると、
|12| と表示されます。
|12|
|12|
|12|

しかし、私は見たい:
|6|6|
|6|6|

言い換えれば、アイテムが次々に表示されないようにしたいのです.1つの行に2つ以上、次の行に2つ以上。

これは可能ですか？

4

2 に答える 2

1

デフォルトでは、ブートストラップのメディア クエリは次のことを行います。

@media (max-width: 767px)
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
}

必要なレイアウトを実現するには、次のような別のメディア クエリを設定します。

@media (max-width: 767px)
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
float: left;
width: 50%;
}

必要に応じて CSS を微調整します。

于 2013-07-26T12:32:56.830 に答える
0

DIVのみに関心がある場合は.span3、このようなメディア クエリが機能します。

@media (min-width: 400px) and (max-width: 767px) {
  .row-fluid .span3 {
    width:44%;
    float:left;
  }
  .row-fluid .span3:nth-child(3) {
    margin-left:0;
  }
}

これにより、小さな画面の場合でも、列を 400 ピクセル未満で 100% 幅 (スタック) に切り替えることができます。デモ: http://bootply.com/69753

もう 1 つのオプションは、このデモ ( http://bootply.com/64868 ) に示されているようにレスポンシブ ユーティリティ クラスを使用することですが、これにはレスポンシブ "ビュー" ごとに個別のマークアップが必要です。

于 2013-07-26T15:00:20.467 に答える