Я новичок в этом, но я не могу понять проблему.

В твиттере я бы использовал:

<div class="row-fluid">
  <div class="span2">Column1</div>
  <div class="span6">Column2</div>
</div>

И все это прекрасно работает. Но я не хочу записывать spanX и spanY непосредственно в мой HTML-файл, скорее, я хотел бы дать значимые имена классов, например:

<div class="user-container">
  <div class="user-filter">First Column</div>
  <div class="user-list">Second Column</div>
</div>

Учитывая тот факт, что я используюhttps://github.com/thomas-mcdonald/bootstrap-sassКак я должен написать свой файл Scss? Я пробовал следующее, и оно не работает (два столбца не отображаются):

@import "bootstrap";
@import "bootstrap-responsive";

.user-container {
    @extend .row-fluid;
}

.user-filter {
    @extend .span2;
}

.user-list {
    @extend .span10;
}

Если я смотрю на сгенерированный код, мне кажется, что все должно быть в порядке:

/* line 164, ../../../../../.rvm/gems/ruby-1.9.3-p125/gems/bootstrap-sass-2.0.0/vendor/assets/stylesheets/bootstrap/_mixins.scss */
.span2, .user-filter {
  width: 140px;
}

и так далее.

Что я делаю неправильно?

ОБНОВИТЬ:

хорошо, просто чтобы понять, что не так - столбцы расположены в виде строк (один за другим), а не как настоящие столбцы (один рядом друг с другом), например:

с начальной загрузкой: Column1 Column2
с моими пользовательскими классами:
Первая колонна
Вторая колонна

Я проверил расположение элементов в Chrome, и кажется, что у загрузочных классов есть свойство float, а у меня - нет. Глядя на исходники CSS, я вижу такие классы:

[class*="span"] {
  float: left;
  margin-left: 20px;
}

Так что в моем случае я думаю, что это должно сгенерировать что-то вроде: [class * = "user-filter"] {float: left; поле слева: 20 пикселей; }

или нет?