Bourbon Neat——响应式网格

Question

我看过 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 的建议将所有内容分隔成一行。

Answer 1

看来您的代码应该可以工作。请参阅此处的要点：http://sassmeister.com/gist/d8f0c7ffa3ff16e93b8a

我猜你没有正确导入纯净的 and/or 波旁威士忌。

在你的 application.css.scss 中确保你 @import "header"

因为这是 css sass 文件，您使用 bourbon neat 来定位您的元素

Bourbon Neat——响应式网格

Bourbon Neat -- responsive grid

html

css

ruby-on-rails

neat

bourbon