Bourbon / Neat有一个简洁的功能,提供自动行(http://neat.bourbon.io/examples/),但我不能让这个功能变得敏感。在我的例子中,我使用4列用于大屏幕,3列用于中等屏幕。 4列布局很好地显示,每4个div包装到一个新行。当我到达媒体查询点时,布局中断了。 div意外地包裹着。
sass:
@import bourbon/bourbon
@import neat/neat
$medium-screen: new-breakpoint(max-width 992px 12)
.content
border: 1px solid blue
.child
+span-columns(3)
+omega(4n)
border: 1px solid red
+media($medium-screen)
+span-columns(4)
+omega(3n)
border: 1px solid green
一些示例html:
<head>
<meta charset="utf-8" />
<!-- Standard Meta -->
<link rel="stylesheet" type="text/css" href="sass.css">
</head>
<body>
<div class="content">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3 <br> foo </div>
<div class="child">child4 </div>
<div class="child">child5</div>
<div class="child">child6</div>
<div class="child">child7</div>
<div class="child">child8</div>
<div class="child">child9</div>
<div class="child">child10</div>
</div>
</body>
</html>
有人知道何时自动&#39;行功能可以与媒体查询一起使用,如果是,该怎么做?
答案 0 :(得分:1)
问题来自于清除漂浮物的整洁方式。
当你超过992px时,Neat使用这个CSS:
.content .child:nth-child(4n+1) {
clear: left;
}
当你在992px之下时,它会使用这个CSS:
@media screen and (max-width: 992px) {
.content .child:nth-child(3n+1) {
clear: left;
}
}
整洁并没有取消&#34; clear: left
上的.content .child:nth-child(4n+1)
。然后,您在第4个元素的第4个和上有clear: left
。为避免此问题,您需要将每个+omega()
封装在自己的媒体查询中。
以下是修复此问题的Sass示例:
@import bourbon/bourbon
@import neat/neat
$large-screen: new-breakpoint(min-width 993px 12)
$medium-screen: new-breakpoint(max-width 992px 12)
.content
border: 1px solid blue
.child
+span-columns(4)
border: 1px solid green
+media($medium-screen)
+omega(3n)
+media($large-screen)
+span-columns(3)
+omega(4n)
border: 1px solid red
答案 1 :(得分:0)