Susy

Question

我在 phone 上注意到，使用此菜单：

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

这是我的 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 或分享 link 2 您的现场 ;-)

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

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

修复子像素问题 这似乎是一个亚像素问题...试试这个 css...

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

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

Susy - Prevent Grid from creating a line break during transition

css

sass