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

Question

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

我有一些这样的代码：

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

我想在悬停时将 aside 标签的宽度增加 50 像素。但是，这将导致 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); }
}

当鼠标悬停在 aside 上时，我正在使用 css 兄弟 select 或 + 到 select 文章元素。

Answer 1

这没有内置功能，但您是否尝试过在 :hover 上覆盖 width？即A列的width加上x长度，B列的away取等量CSScalc() 在这里可以提供帮助。

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

也就是说，如果您的需要允许的话，这听起来像是 flexbox 的一个很好的用例。

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

Neat: Dynamically increasing column width while maintaining grid structure

css

neat