Susy - 防止 Grid 在过渡期间创建换行符

Question

我注意到在我的手机上，使用这个菜单：

很明显，它超出了这张图片的行大小，并且在转换过程中创建了一个换行符，但是在桌面上，它没有。 在过渡期间它应该保持在同一行：

这是我的无礼：

.h5-menu { //h5 menu styling
  @include span(4 inside);
  @include transition(0.25s ease all);
  font-weight:400; //override default 300
  text-transform:uppercase;
  color:$lb300;
  padding:{
    bottom:25px;
    top:25px;
  }
  background-color:$lb700;
  cursor:pointer;
}

.h5-selected { //css class to add when option is selected
  @include span(8 inside);
  background-color:$lb500!important;
  color:$white!important;
}

在父元素上，我将布局设置为没有装订线。

我注意到，当我删除过渡时，没有换行；但是，它看起来很不稳定，无论如何我可以通过过渡来完成这项工作吗？

CodePen

Answer 1

在你提到你想要多少列之后尝试添加of 12...

@include span(4 of 12 inside);

如果仍然无法解决...请考虑准备一个 codepen/jsfiddler 或将链接 2 分享到您的实时站点 ;-)

编辑 如果这不能解决...

1. 检查 Susy 的版本是否至少为 v2+
2. 检查元素以查看是否应用了任何水平边距，我遇到了数千个问题，其中边距被证明是罪魁祸首。
3. 两个元素的box-sizing 应为border-box。

修复亚像素问题 好像是亚像素问题...试试这个 css...

.h5-selected {
  ...
  margin-right: -1px;
}