使用波旁威士忌整洁的转移元素

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/

即。它正在敲门。社交和。我该如何停止这种情况？

我知道答案可能非常简单。

Answer 1

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

剩下的九列，两个最终元素将一起占6列（每列3列）。整洁的shift混合蛋白通过添加margin-left移动元素。因此，如果我们将第二个元素转移到3列上，则根本不需要移动第三个元素！

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

如果您真的希望第二个元素（.social）位于极右翼列中，其下面是第三个元素（.contactDetails），则需要在6（3 6 3）上移动social。但是，除了您行中的最终元素以外，整洁都包括右键。那就是omega()混合物进来的地方，将其删除。这是一个令人困惑的，可能不是必需的，因此我将其链接并添加一个变体，显示在Codepen演示中。