2

私は次のものを持っています：

<div class="container-fluid">
   <div class="row-fluid">
      <div class="span3"></div>
      <div class="span3"></div>
      <div class="span3"></div>
      <div class="span3"></div>
   </div>
</div>

デフォルトでは、この div.span* は次のように画面の幅全体に広がります。

[x][x][x][x]

特定の画面幅で、これを次のように 2x2 グリッドに表示したい:

[x][x]
[x][x]

どうすればいいですか？

4

3 に答える 3

4

以前の試みで申し訳ありませんが、あなたの質問を完全には理解していませんでした:

独自の @media セレクターを使用しない限り、ブートストラップで試みていることは実際には不可能です。Neatというライブラリがあります。これはあなたが探している例だと思います。

以前の試み:

ここからこれを試してください：

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

これにより、次の結果が得られます。

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

まあ、それはたくさんありdivます。これが軽量化できるかどうかはよくわかりません。

于 2013-02-10T13:55:04.947 に答える
1

元の質問は、古い版のブートストラップに関するものであるようです。

これが、Bootstrap 3 マークアップで問題をうまく解決するものです。重要な要素は、ビューポートclearfixに影響を与える div ですxs[sm一般的なユース ケース]。(sm以下の例には含まれていません)。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

getbootstrap.com経由

于 2015-12-03T19:01:00.180 に答える
0

メディア クエリを必要とせずにレスポンシブである 2 つのオプションを次に示します。ウィンドウのサイズを変更して、ウィンドウの反応を確認します。

CSS 列:

http://jsfiddle.net/88t4L/

.row-fluid {
    columns: 2 8em;
}

ここでは、列の幅は少なくとも 8em である必要がありますが、すべての列が一列に表示される余地がある場合は、そのようになります。

http://caniuse.com/#search=columns

CSS フレックスボックス:

http://jsfiddle.net/88t4L/1/

.row-fluid {
    display: flex;
    flex-flow: row wrap;
}

.row-fluid .span3 {
    flex: 1 0 8em; /* grow equally, don't shrink, preferred width of 8em */
}

http://caniuse.com/#search=flexbox

于 2013-02-10T16:53:51.230 に答える