0

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枚あります。

私が取得しようとしているのは、それぞれ 4 つの画像を含む 3 つの行です。

私が間違っていることについてのアイデアはありますか？

4

1 に答える 1

3

グリッドを適切に設定するために必要な width プロパティをオーバーライドしています。

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

必要な結果を得るには、同じスパン列とオメガ値を持つコンテナーを作成し、それぞれの内部に 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;
    }
  }
于 2014-02-02T19:17:55.133 に答える