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

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

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

自动行不在Bourbon Neat中工作

1 个答案: