опрятные / чувствительные к бурбону автоматические ряды

Bourbon/Neat имеет удобную функцию, которая обеспечивает автоматические строки (http://neat.bourbon.io/examples/), но я не могу заставить эту функцию реагировать. В моем примере я использую 4 столбца для больших экранов и 3 столбца для среднего экрана. Макет с 4 столбцами выглядит красиво, каждый 4-й 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
person shaft    schedule 26.10.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Проблема возникает из-за аккуратного способа очистки поплавков.

Когда вы превышаете 992 пикселя, 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 не "отменяет" clear: left на .content .child:nth-child(4n+1). Затем у вас есть 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
person zessx    schedule 27.10.2014

arrow_upward
0
arrow_downward

Вы можете использовать это, чтобы решить проблему;

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

person bazzlebrush    schedule 12.01.2015