12

私は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     ]

ブートストラップでネイティブにこの動作を実現することは可能ですか?

4

4 に答える 4

5

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;
    }
}
于 2013-02-22T19:04:26.400 に答える
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%;
    }
}
于 2013-05-09T14:55:30.183 に答える
1

@mediaタブレットに対応するクエリのスパンの CSS をオーバーライドするだけです。

したがって、次のようなことを試すことができます。

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

もちろん、調整が必要な場合もあります。パディングとマージンのため、実際の幅は 50% にならない場合があります。

于 2013-02-21T15:34:31.513 に答える
0

うーん。CSS でこれらのルールの両方を試しましたが、どちらもうまくいきませんでした。BS2.0でこれがないのは残念です。BS3.0で追加してほしい！

ありがとう、

JK

于 2013-03-08T00:19:00.140 に答える