2015-01-28 3 views
0

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.

ответ

1

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

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

В вашей application.css.scss убедитесь, что вы @import «заголовок»

  • Так что файл CSS дерзость вы используете с бурбона аккуратным, чтобы расположить элементы