整洁：动态增加列宽，同时保持网格结构

Question

我使用Bourbon的Neat库作为我的网格系统。

我有一些像这样的代码：

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

我希望将aside标记的宽度增加，比如说，悬停时为50px。但是，这会导致article被下推到下一行。

有没有办法缩放一列的宽度并按比例调整另一列的大小？

我知道这可以用javascript完成，但我想知道是否有办法用Neat网格系统做到这一点。

谢谢！

---

修改

以下是适合我的解决方案：

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()可以提供帮助。< / p>

Neat的文档深入了解span-columns及其输出的确切功能：http://thoughtbot.github.io/neat-docs/latest/#span-columns

话虽如此，如果您的需求允许，这听起来像是一个很好的flexbox用例。