html - Bourbon Neat でスパン列の余白を削除

Question

レスポンシブ グリッドに、Thoughtbot の Bourbon Neat を使い始めています。全体的にはとても洗練されていて、とても気に入っていますが、ちょっとした問題が 1 つあります。

マージンなしで2つの列を隣り合わせにしようとしていますが、例からそれらが持っているものを複製しようとした後、同じ結果が得られません.

サンプルの HTML は次のとおりです。

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <p>
            This is the container
        </p>

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

これが私のSCSSです：

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
 }

}

これが生成されます：

しかし、例が示すように、table メソッドを使用して 2 つの列を互いにネスト/突き合わせようとすると、次のようになります。

SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row (table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display;
 }

}

出力：

機能するルートに行く@include omega();と、最後の列の全幅を拡張しません:

SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    @include omega();
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include omega();
 }

}

出力：

基本的に、コンテナ セクションにあるコンテンツを省略して、探している結果が得られるようにすることができます。しかし、それを達成するために空を作成する必要がありますdivか?:

SCSS

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row(table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display
 }

}

HTML ( 内のコンテンツ.containerはコメント化されています):

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <!-- <p>
            This is the container
        </p> -->

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

出力：

とにかく、これを達成するための「適切な」方法が何であるかわかりません。ドキュメントは、2 つの列を互いに入れ子にする方法を説明するための具体的なものではありません。そして、私が彼らの例で再現しようとしたことから、同じ結果が得られませんでした.

margin:0;最後の列に a を特に追加する必要がない限り。

Answer 1

各コンテナーの span-columns() をそれぞれグリッドの半分より少し少なく設定し、次に各コンテナーから取得した残りの値をシフトし、次のように各コンテナーを左/右から離して shift() できます。

html:

<div id="wrapper">
    <div id="1"></div>
    <div id="2"></div>
</div>

サス/scc:

#wrapper
{
    #1
    {
        @include span-columns(5);
        @shift(1);
    }
    #2
    {
        @span-columns(5);
        @shift(-1);
    }


}

または、方向コンテキスト mixin を使用して #2 の方向を切り替えることもできます...

サス/scc:

#wrapper
{
    #1
    {
        @include include span-columns(5);
        @include shift(1);
    }

        @include direction-context(right-to-left)
        {
            #2
            {
                @include span-columns(5);
                @include shift(-1);
            }
        }

}

私があなたの問題を100％フォローしているかどうかはわかりませんが、左のdivの右側を右のdivの左側に直接触れさせることができないということであれば、これらの2つの解決策はうまくいくと思います。彼らと少し遊んで..

それがどのように機能するか教えてください〜gl！

Answer 2

@include span-columns(6 of 12,block-collapse) のようなことができます