twitter boostrap（responsive）：.span3采用.span6全宽行为，当宽度在320px和797px [英] twitter boostrap (responsive) : .span3 taking .span6 full width behaviour when width between 320px and 797px

问题描述

使用twitter bootstrap.css和bootstrap-responsive.css， .span * 变成等效于 .span12 768px 。

这种行为在嵌入文本时是完全正确的，但对于图片， 4x1 和 1x4 之间的 2x2 布局。

如何从 767px 到<$ c $获取此 2x2 布局c> 320px ？

768像素宽（4x1）

767像素宽（1x4）

HTML：

 < div class =row-fluid> 
< ul class =thumbnailails> 
< li class =span3> 
< div class =thumbnailhref =＃> 
< img alt =src =http://placehold.it/200x150> 
< p> 1< / p> 
< / div> 
< / li> 
< li class =span3> 
< div class =thumbnailhref =＃> 
< img alt =src =http://placehold.it/200x150> 
< p> 2< / p> 
< / div> 
< / li> 
< li class =span3> 
< div class =thumbnailhref =＃> 
< img alt =src =http://placehold.it/200x150> 
< p> 3< / p> 
< / div> 
< / li> 
< li class =span3> 
< div class =thumbnailhref =＃> 
< img alt =src =http://placehold.it/200x150> 
< p> 4< / p> 
< / div> 
< / li> 
< / ul> 
< / div> 
  

可用于通过使用 @media（min-width：320px）和（max-width：767px） 来覆盖介于320px和767px之间的twitter引导/ p>

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

• 3个课程足够优先级重写 .row-fluid .span3 from bootstrap.css


• 添加 .thumbnails .row-fluid 和 .span3 之间不会影响其他 .row -fluid .span3 用于布局。

宽度：48.6188％; 和 -left：2.76243％; 对应于给予的值.row-fluid .span6

float：left; 覆盖 float：none

伪类 nth-child（2n + 1）已与 margin-left：0; 删除页面左侧（1和3）上 .row-fluid .thumbnails .span3 的左边距。

With twitter bootstrap.css and bootstrap-responsive.css, .span* become equivalent to a .span12 under 768px.

This behaviour is perfectly fine when text is embedded, but for pictures it make sense to use a 2x2 layout between 4x1 and 1x4.

How to obtain this 2x2 layout from 767px to 320px?

768px wide (4x1)

767px wide (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/

---

Notes: This question is inspired by the request asked in a comment on this answer

解决方案

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 wide (2x2)

319px wide (1x4)

Explanations:

Media queries can be used to override twitter bootstrap between 320px and 767px by using @media (min-width: 320px) and (max-width: 767px)

.row-fluid .thumbnails .span3 has been used over a .span3{ ... } or .row-fluid .span3{ ... } for the following reasons:

• 3 classes make enough priority to override .row-fluid .span3 from bootstrap.css
• adding .thumbnails between .row-fluid and .span3 will not affect the other .row-fluid .span3 used for the layout.

The width:48.6188%; and margin-left: 2.76243%; correspond the the value given to a .row-fluid .span6

The float:left; overrides the float:none

The pseudo class nth-child(2n+1) has been used with margin-left: 0; to remove the left margin on the .row-fluid .thumbnails .span3 ending up on the left side of the page (1 and 3).

这篇关于twitter boostrap（responsive）：.span3采用.span6全宽行为，当宽度在320px和797px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！