twitter boostrap（响应）：.span3在宽度介于320px和797px之间时采用.span6全宽行为

Question

使用twitter bootstrap.css和bootstrap-responsive.css， .span*等同于768px下的.span12 。

嵌入文本时，此行为非常精细，但对于图片，在4x1和1x4之间使用2x2布局是有意义的。

如何从767px到320px获得这个2x2布局？

768px宽（4x1）

767px宽（1x4）

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/

---

注意：此问题的灵感来自对此答案的评论中提出的请求

Answer 1

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）

319像素宽（1x4）

说明：

通过使用@media (min-width: 320px) and (max-width: 767px) 媒体查询可用于覆盖320px和767px之间的Twitter引导程序

.row-fluid .thumbnails .span3已用于.span3{ ... }或.row-fluid .span3{ ... } ，原因如下：

• 3个类具有足够的优先级来覆盖.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)已经使用margin-left: 0; 删除.row-fluid .thumbnails .span3上的左边.row-fluid .thumbnails .span3最后在页面的左侧（1和3）。