0

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>

「自動」行機能をメディアクエリで使用できるかどうか、またその方法を知っている人はいますか?

4

2 に答える 2

0

これを使用して問題を解決できます。

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

于 2015-01-12T16:07:39.237 に答える