Бурбон Аккуратная отзывчивая сетка

Я просмотрел примеры адаптивной сетки 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.


ruby-on-rails html css bourbon neat
person ma77c    schedule 28.01.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, ваш код должен работать. См. суть здесь: http://sassmeister.com/gist/d8f0c7ffa3ff16e93b8a

Я предполагаю, что вы неправильно импортируете чистый и / или бурбон.

В application.css.scss убедитесь, что вы @импортируете "заголовок"

  • Так как это файл css sass, который вы используете с аккуратным бурбоном для позиционирования ваших элементов.
person JustH    schedule 28.01.2015