1

twitter の bootstrap.css と bootstrap-responsive.css で、以下.span*と同等になります。.span12768px

この動作は、テキストが埋め込まれている場合はまったく問題ありませんが、画像の場合はと2x2の間のレイアウトを使用するのが理にかなっています。4x11x4

2x2からこのレイアウトを取得する方法767pxは320px?

幅 768 ピクセル (4x1) 幅 768px の 4x .span3

幅 767 ピクセル (1x4) 幅 767px の 4x .span3

HTML:

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span3">
            <div class="thumbnail" href="#">
                <img alt="" src="http://placehold.it/200x150">
                <p>1</p>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail" href="#">
                <img alt="" src="http://placehold.it/200x150">
                <p>2</p>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail" href="#">
                <img alt="" src="http://placehold.it/200x150">
                <p>3</p>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail" href="#">
                <img alt="" src="http://placehold.it/200x150">
                <p>4</p>
            </div>
        </li>
    </ul>
</div>

http://jsfiddle.net/baptme/jWcdS/

注：この質問は、この回答に対するコメントで尋ねられたリクエストに触発されています

4

1 に答える 1

3

CSS:

@media (min-width: 320px) and (max-width: 767px) {
    .row-fluid .thumbnails .span3 {
        width:48.6188%;
        margin-left: 2.76243%;        
        float:left;
    }
    .row-fluid .thumbnails .span3:nth-child(2n+1) {
        margin-left: 0;
    }
}

http://jsfiddle.net/baptme/jWcdS/1/

幅 500px (2x2)

幅 500px の 4x .span3

幅 319px (1x4)

幅 319px の 4x .span3

説明:

メディア クエリを使用して、320px から 767px の間で Twitter ブートストラップをオーバーライドすることができます。@media (min-width: 320px) and (max-width: 767px)

.row-fluid .thumbnails .span3.span3{ ... }は、または.row-fluid .span3{ ... }次の理由で使用されています:

  • 3 つのクラスは、bootstrap.cssからオーバーライドするのに十分な優先度を設定します.row-fluid .span3
  • .thumbnailsとの間.row-fluidに追加しても、レイアウトに使用される.span3他のものには影響しません。.row-fluid .span3

width:48.6188%;とmargin-left: 2.76243%;は、に与えられた値に対応します。.row-fluid .span6

はfloat:left;、float:none

疑似クラスは、ページの左側で終了する左マージンを削除するためにnth-child(2n+1)使用されています (1 および 3)。margin-left: 0;.row-fluid .thumbnails .span3

于 2012-06-29T13:54:13.233 に答える