0

次のように、さまざまな列幅 (Masonry のようなものを使用せずに) で同じ高さの Metro のようなレイアウトを構築しようとしています。

--------------------------
| col(2)        | col(1) |
--------------------------
| col(1)| col(1)| col(1) |
--------------------------
| col(1) | col(2)        |
--------------------------

ドキュメントに記載されているさまざまな機能を利用しようとしましたが、うまくいきません。私の現在のコードは次のとおりです。

SCSS

// Config
$border-box-sizing: true !default;
$visual-grid: true !default;

// Container
.container {
    @include outer-container;
}

article.post {
    @include span-columns(4);
    height: 300px;
    background: #aaa;
}

article.large {
    @include span-columns(8);
}

HTML

<div class="container">
    <article class="post large">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post large">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post large">text</article>
</div>

ご覧のとおり、空想は何もありません。これを解決するにはどうすればよいですか (Bootstrap に戻る以外に:))?

4

1 に答える 1

0

@include omega();改行を取得するために使用する必要があります。

http://thoughtbot.github.io/neat-docs/latest/#omega

したがって、12 スパンクローンごとに休憩を取りたいので、そこにオメガを追加する必要があります。

与えられた例では、次のようになります。

これを追加しますscss：

article.break {   @include omega(); }

そして、あなたhtmlを次のように変更します：

<div class="container">
    <article class="post large">text</article>
    <article class="post break">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post break">text</article>
    <article class="post large">text</article>
    <article class="post break">text</article>
    <article class="post">text</article>
    <article class="post large break">text</article>
</div>
于 2015-01-18T14:08:31.130 に答える