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）。