整洁/波旁响应自动行答案

【问题标题】：neat/bourbon responsive automatic rows整洁/波旁响应自动行
【发布时间】：2014-10-26 23:31:50
【问题描述】：

Bourbon/Neat 有一个简洁的功能，可以提供自动行 (http://neat.bourbon.io/examples/)，但我无法让这个功能变得响应。在我的示例中，我将 4 列用于大屏幕，将 3 列用于中屏幕。 4 列布局显示得很好，每 4 个 div 换行到一个新行。当我到达媒体查询点时，布局分崩离析。 div 意外换行。

萨斯：

@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>

有人知道“自动”行功能何时可以与媒体查询一起使用，如果可以，该怎么做？

【问题讨论】：

标签： sass bourbon neat

【解决方案1】：

问题来自于清除浮动的整洁方式。

当你超过 992px 时，Neat 使用这个 CSS：

.content .child:nth-child(4n+1) {
  clear: left;
}

当你低于 992 像素时，它会使用这个 CSS：

@media screen and (max-width: 992px) {
  .content .child:nth-child(3n+1) {
    clear: left;
  }
}

Neat 不会“取消”.content .child:nth-child(4n+1) 上的 clear: left。然后你有一个clear: left 在第 4 个和在第 5 个元素。为避免此问题，您需要将每个 +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

【讨论】：

【解决方案2】：

您可以使用它来解决问题；

https://github.com/joshfry/omega-reset-for-bourbon-neat/tree/master/dist

【讨论】：