我查看了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 的建议使这一切都成为一条线。