整洁/波本自动响应自动行

时间:2014-10-26 23:31:50

标签: sass bourbon neat

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;行功能可以与媒体查询一起使用,如果是,该怎么做?

2 个答案:

答案 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)