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

Question

我试过使用 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 张图像。

对我做错了什么有什么想法吗？

Answer 1

您正在覆盖正确设置网格所需的宽度属性。

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

要获得您想要的结果，您应该创建具有相同 span-columns 和 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;
    }
  }