css - Susy - 防止 Grid 在转换期间创建换行符

Question

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

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

这是我的sass:

.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;
}