我正在使用bootstrap并且有一个带有col-xs-12,col-sm-6,col-md-4的div。
所有:
我的代码似乎清除了每1项。
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
.video-item:nth-child(1n+1){
clear:left
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
.video-item:nth-child(2n+1){
clear:left
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
.video-item:nth-child(3n+1){
clear:left
}
}
<div class="video-item col-sm-6 col-xs-12 col-md-4 img-sec">
Box
</div>
<div id="video-page" >
<div class="container">
<h2><center>Video Library</center></h2>
<div class="span12 details">
{% for article in blogs.videos.articles reversed %}
{% include 'iframevideoid', video_url:{{article.content | strip| strip_html}} %}
<div class="video-item col-sm-6 col-xs-12 col-md-4 img-sec">
<div class="kind">
<a class="open-popup" data-target="#myModal" data-toggle="modal" data-video-id="{{videoid}}" >
<!-- {{ article.image.src | img_url: 'large'| img_tag: 'Video', 'img-responsive' }} -->
<img src="https://img.youtube.com/vi/{{videoid}}/mqdefault.jpg" alt="Video" class="img-responsive">
</a>
<p class="para">
<a data-target="#myModal" data-toggle="modal" data-video-id="{{videoid}}">
<h3 class="pare-head">{{ article.title }}</h3>
</a>
</p>
</div>
</div>
{% endfor %}
</div>
<!-- Modal -->
{%include 'modal-video' %}
</div>
</div>
在这种情况下使用min-width
不正确它将覆盖所有其他媒体CSS。请参阅下面的代码,我将您的CSS转换为blue
(不清楚)和red
(清除:左)以便于理解。
.video-item {
height: 10px;
width: 100%;
background: blue;
margin-bottom: 10px;
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.video-item {
background: red;
}
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.video-item:nth-child(2n){
background: red;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width:769px) and (max-width: 992px){
.video-item:nth-child(3n){
background: red;
}
}
<div class="video-item">
</div>
<div class="video-item">
</div>
<div class="video-item">
</div>
<div class="video-item">
</div>
<div class="video-item">
</div>
<div class="video-item">
</div>
<div class="video-item">
</div>
<div class="video-item">
</div>
<div class="video-item">
</div>
如您所见,在中型设备上,只有第3项为红色:
在小型设备上,只有第二项为红色:
超小型设备都是红色的: