如何在Susy的断点处应用span-column？

Question

现在，我几乎有一个响应式标题，因为我原来的问题是How to make a header responsive?。我仍然有点担心元素的宽度正确。

我正在使用以下Susy-Compass设置：

.mod-header
  @include container ($total-columns, $mobile-to-medium, $medium-to-large)  
  border: 2px red solid
  +rem('height', 70px)

  @include susy-grid-background

  @include at-breakpoint($mobile-to-medium $columns-medium $medium-to-large)
    @include susy-grid-background

  @include at-breakpoint($medium-to-large)
    @include susy-grid-background

   .logo
     float: left
     border: 1px red solid
     +rem('margin', 20px 0)
     +data-uri-bg('logo.png')

   nav
     float: right
     +rem('margin', 20px 0)
     font-weight: 600
     @include at-breakpoint($mobile-to-medium $columns-medium)
       border: 1px blue solid
       @include span-columns(2)
       .tour
         display: none

       .action
         border: 1px green solid
         @include span-columns(1)

这映射到以下渲染布局：

现在，span-columns的效果似乎没有生效，以及从.logo到nav的间距。我希望.action和.find标记的右边各有1列宽，而.logo左边有一个固定的宽度。有什么想法吗？

修改

Susy的屏幕设置为：

$mobile-to-medium: 400px
$medium-to-large:  800px

$columns-small:    1
$columns-medium:   8
$columns-large:    12

$column-width   : 3em            // each column is 4em wide
$gutter-width   : 0.4em            // 1em gutters between columns
$grid-padding   : 0              // grid-padding equal to gutters

$total-columns: $columns-small

Answer 1

我认为您需要在断点处重置列。我不知道您的mobile-to-medium，columns-medium，medium-to-large和total-columns的价值是多少。这是一个未在上面列出的重要信息。但你可能想检查一下Changing from 4 to 3 columns with omega with Susy fails，我认为这与你的问题有关。