Ive рассмотрел примеры для чувствительной сетки. Насколько я знаю, я использую его правильно.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";
Как упоминалось ранее. Дивы все занимают свою полную линию. Я хотел бы узнать, как сделать все это одной линией с разделением, как предлагает css.