整齊：在保持網格結構的同時動態增加列寬

Question

我正在使用Bourbon的整潔庫來處理我的網格系統。

我有一些像這樣的代碼：

section { 
    @include outer-container; 
    aside { @include span-columns(3); } 
    article { @include span-columns(9); } 
} 

我想增加aside標籤通過的寬度，讓我們說，50像素上懸停。但是，這會導致article被推下到下一行。

有沒有辦法縮放一列的寬度並按比例調整另一列的大小？

我知道這可以用javascript來完成，但我想知道是否有一種方法可以用整潔的網格系統來實現。

謝謝！

---

編輯

這裏是爲我工作的解決方案：

section { 
    @include outer-container; 
    aside { 
    @include span-columns(3); 

    &:hover { 
     @include span-columns(2); 

     & + article { 
     @include span-columns(11); 
     } 
    } 
    } 
    article { @include span-columns(9); } 
} 

我使用的CSS兄弟選擇+選擇文章元素時aside正在徘徊過度。

Answer 1

這裏沒有內置功能，但是您是否嘗試過覆蓋width:hover？也就是說，將x長度添加到列A的width，並從B列取以外的。CSS calc()可能對此有所幫助。

整齊的文檔給洞察span-columns，其輸出的確切功能：http://thoughtbot.github.io/neat-docs/latest/#span-columns

話雖這麼說，這聽起來像一個偉大的使用案例Flexbox的，如果你需要允許這一點。