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。它以.dealerLogo的高度击倒.social和.contactDetails。我怎么能阻止这种情况发生呢？

我知道答案可能很简单。

Answer 1

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

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

请参阅此演示：https://codepen.io/alexbea/pen/JbZVjV

如果你真的希望第二个元素（.social）位于最右边的列中，并且第三个元素（.contactDetails）位于其下，则需要移动{{ 1}}超过6（3 + 6 + 3）。但是Neat在你的行中的最后一个元素上包含了所有权利。 social mixin进来的地方，将其删除。这是一个令人困惑的问题，可能没有必要，所以我link it并添加一个显示在Codepen演示中的变体。

使用Bourbon Neat移动元素

1 个答案: