0

Bourbon Neatレスポンシブ グリッドの例を見てきました。私の知る限り、私はそれを正しく使用しています。

問題

  • タグは<div>すべて自分で作ったかのように独自の行を占めます span-columns(12)

私の推測では、要素を正しくネストしていないか、<sectionまたはなどのタグを使用する必要があります<aside>

以下は、このレスポンシブフレームワークを学ぶために私がこれまでに持っているものです...

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>LawRails</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<%= render "layouts/header" %>
<%= yield %>

</body>
</html>

header.html.erb

<div class="contain-header">
<div class = "last-names">Attorney & Attorney</div>
<div class = "contain-eight">
<div class = "street-address">250 W. Main Street Suite 9999</div>
<div class = "city-state-zip">City, US 30399</div>
</div>
</div>

header.css.scss

.contain-header {
    @include outer-container;
    .last-names {
        @include span-columns(4);
    }
.contain-eight {
    @include span-columns(8);
    .street-address {
        @include span-columns(4 of 8);
    }
    .city-state-zip {
        @include span-columns(4 of 8);
    }
}
}

application.css.scss

@import "bourbon";
@import "neat";
@import "welcome";
@import "layout";

前述のとおりです。div はすべて、独自の完全な行を占めます。CSSが示唆するように、これをすべて1行で区切る方法を学びたいと思います。

4

1 に答える 1

1

あなたのコードは動作するはずです。ここの要旨を参照してください：http://sassmeister.com/gist/d8f0c7ffa3ff16e93b8a

私の推測では、ニートやバーボンを適切にインポートしていないということです。

application.css.scss@import "header" であることを確認してください

  • それは要素を配置するためにバーボンニートで使用しているcss sassファイルであるため
于 2015-01-28T17:17:15.230 に答える