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

Question

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

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

如何从2x2到767px获取此320px布局？

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/

---

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

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）

319px宽（1x4）

<强>说明：

Media queries可用于使用@media (min-width: 320px) and (max-width: 767px)

覆盖320px和767px之间的Twitter引导程序

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

• 3个类使得priority足以覆盖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)已与margin-left: 0;一起用于删除页面左侧{1}}上的左边距（1和3）。