[英]twitter boostrap (responsive) : .span3 taking .span6 full width behaviour when width between 320px and 797px
With twitter bootstrap.css and bootstrap-responsive.css, .span*
become equivalent to a .span12
under 768px
. 使用twitter bootstrap.css和bootstrap-responsive.css, .span*
等同于768px
下的.span12
。
This behaviour is perfectly fine when text is embedded, but for pictures it make sense to use a 2x2
layout between 4x1
and 1x4
. 嵌入文本时,此行为非常精细,但对于图片,在4x1
和1x4
之间使用2x2
布局是有意义的。
How to obtain this 2x2
layout from 767px
to 320px
? 如何从767px
到320px
获得这个2x2
布局?
768px wide (4x1) 768px宽(4x1)
767px wide (1x4) 767px宽(1x4)
HTML: 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/ http://jsfiddle.net/baptme/jWcdS/
Notes: This question is inspired by the request asked in a comment on this answer 注意:此问题的灵感来自对此答案的评论中提出的请求
CSS: 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/ http://jsfiddle.net/baptme/jWcdS/1/
500px wide (2x2) 500px宽(2x2)
319px wide (1x4) 319像素宽(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)
通过使用@media (min-width: 320px) and (max-width: 767px)
媒体查询可用于覆盖320px和767px之间的Twitter引导程序
.row-fluid .thumbnails .span3
has been used over a .span3{ ... }
or .row-fluid .span3{ ... }
for the following reasons: .row-fluid .thumbnails .span3
已用于.span3{ ... }
或.row-fluid .span3{ ... }
,原因如下:
.row-fluid .span3
from bootstrap.css 3个类具有足够的优先级来覆盖.row-fluid .span3
.thumbnails
between .row-fluid
and .span3
will not affect the other .row-fluid .span3
used for the layout. 加入.thumbnails
之间.row-fluid
和.span3
不会影响其他.row-fluid .span3
用于布局。 The width:48.6188%;
width:48.6188%;
and margin-left: 2.76243%;
和margin-left: 2.76243%;
correspond the the value given to a .row-fluid .span6
对应给予.row-fluid .span6
The float:left;
float:left;
overrides the float:none
覆盖float:none
The pseudo class nth-child(2n+1)
has been used with margin-left: 0;
伪类nth-child(2n+1)
已经使用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). 删除.row-fluid .thumbnails .span3
上的左边.row-fluid .thumbnails .span3
最后在页面的左侧(1和3)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.