css - 自动行在Bourbon Neat中不起作用

我尝试使用Bourbon Neat设置一些自动行，但是它们不起作用。

以下是我的样式表文件中包含的代码，应该将其整理出网格：

@import "bourbon";
@import "grid-settings";
$visual-grid: true;
@import "neat";

section {
  @include outer-container;

  .service-connection-img {
    @include span-columns(3);
    @include omega(4n);
    width: 150px;
    height: 150px;
    border-radius: 10px;
  }
}

然后在HAML文件中我有这个：

= stylesheet_link_tag "connections"

%section{class:"connections"}

  / = link_to "Twitter", user_omniauth_authorize_path(:twitter)
  %a{href:"/users/auth/twitter"}
    = image_tag "twitter250.png", class: "service-connection-img"

  %a{href:"https://github.com/login/oauth/authorize?client_id=ff7013fc7d06261543d7&scope=repo&state=bubble"}
    = image_tag "github250.png", class: "service-connection-img"

  %a{href:"/users/auth/evernote"}
    = image_tag "evernote250.png", class: "service-connection-img"

  %a{href:"/users/auth/instagram"}
    = image_tag "instagram250.png", class: "service-connection-img"

  %a{href:"/auth/wunderlist"}
    = image_tag "wunderlist250.png", class: "service-connection-img"

  %a{href:"/users/auth/instapaper"}
    = image_tag "instapaper250.png", class: "service-connection-img"

  %a{href:"/users/auth/fitbit"}
    = image_tag "fitbit250.png", class: "service-connection-img"

  %a{href:"/users/auth/pocket"}
    = image_tag "pocket250.png", class: "service-connection-img"

  %a{href:"/users/auth/facebook"}
    = image_tag "facebook250.png", class: "service-connection-img"

  %a{href:"/users/auth/lastfm"}
    = image_tag "lastfm250.png", class: "service-connection-img"

  %a{href:"/auth/rescue_time"}
    = image_tag "rescuetime250.png", class: "service-connection-img"

  %a{href:"/auth/whatpulse"}
    = image_tag "whatpulse250.png", class: "service-connection-img"

结果如下：

http://i.stack.imgur.com/bg9OV.png

在看不到其余图像的地方，但其中有12张。

我想要得到的是3行，每行包含4张图像。

关于我在做什么错的任何想法吗？

最佳答案

您将覆盖正确设置网格所需的width属性。

  .service-connection-img {
    @include span-columns(3);
    @include omega(4n);
    // --> width: 150px;
    height: 150px;
    border-radius: 10px;
  }

为了获得所需的结果，您应该创建具有相同跨距列和omega值的容器，然后在每个容器内部放置一个150x150居中的图像。

  .service-connection-container {
    @include span-columns(3);
    @include omega(4n);
    border-radius: 10px;
    text-align: center;

    img {
      @include size(150);
      max-width: 100%;
      margin: auto;
    }
  }

关于css - 自动行在Bourbon Neat中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21512749/