1

有了 twitter bootstrap.css 和 bootstrap-responsive.css，.span*就相当于一个.span12under 768px。

当嵌入文本时，这种行为非常好，但对于图片，使用和2x2之间的布局是有意义的。4x11x4

如何从 to 获得此2x2布局？767px320px

768 像素宽 (4x1) 4x .span3，宽度为 768px

767 像素宽 (1x4) 4x .span3，宽度为 767px

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/

500 像素宽 (2x2)

4x .span3，宽度为 500px

319 像素宽 (1x4)

4x .span3，宽度为 319px

说明：

媒体查询可用于覆盖 320px 和 767px 之间的 twitter bootstrap，方法是使用@media (min-width: 320px) and (max-width: 767px)

.row-fluid .thumbnails .span3已被使用过 a.span3{ ... }或.row-fluid .span3{ ... }出于以下原因：

  • 3个类有足够的优先级.row-fluid .span3从bootstrap.css覆盖
  • 在和.thumbnails之间添加不会影响用于布局的其他。.row-fluid.span3.row-fluid .span3

width:48.6188%;和margin-left: 2.76243%;对应于给a的值.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 回答