使用 Bourbon Neat 移动元素

Question

刚开始使用 SASS/Bourbon/Neat。

我有 3 个项目，全部占用 3 列。我想将其中 2 个移到右侧，将 1 个移到左侧。这是我正在使用的 sass/SCSS：

    #mod-header{
    background-color: $primaryColor;
    color: $primaryTextColor;

    header{
        @include outer-container();

        .social{
            @include shift(9);
            @include span-columns(3);
        }

        .contactDetails{
            @include shift(9);
            @include span-columns(3);
        }

        .dealerLogo{
            @include span-columns(3);
        }

    }
}

但这是我得到的结果：

https://jsfiddle.net/2qfm6dnd/

IE。它将 .social 和 .contactDetails 降低了 .dealerLogo 的高度。 请问我该如何阻止这种情况发生？

我知道答案可能很简单。

Answer 1

默认情况下，Neat 使用 12 列。所以如果第一个元素占了三个，你就剩下 9 个。根据您的描述，我认为您想要一个开放的四分之一行，然后是第二个和第三个元素。如果我错了，请纠正我。

剩下这 9 列后，最后两个元素将占用 6 列（每列 3 列）。 Neat shift mixin 通过添加 margin-left 来移动元素。因此，如果我们将第二个元素移动 3 列，则根本不需要移动第三个元素！

查看此演示：https://codepen.io/alexbea/pen/JbZVjV

如果您真的希望第二个元素 (.social) 位于最右列，第三个元素 (.contactDetails) 在其下方，则需要将 social 移动 6 (3 + 6 + 3）。但是 Neat 包括除最后一个元素之外的所有元素的右边距。这就是 omega() mixin 进来的地方，用来删除它。这是一个令人困惑的问题，可能没有必要，所以我将 link it 并在 Codepen 演示中添加一个变体。