相关疑难解决方法(0)

我对此很新,但我无法弄清楚问题.

在twitter bootstrap中我会使用:

<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;
}

等等.

我究竟做错了什么？

更新:

好吧,只是为了清楚是什么问题 - 列被列为行(一个接一个),而不是真正的列(彼此相邻),例如:

with bootstrap:Column1 Column2
with my custom classes:
First Column
Second Column

我已经检查过Chrome中的元素布局,似乎bootstrap类有float属性,而我的 - 没有.看看css源我看到这样的类:

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

Twitter bootstrap文档讨论了三个mixin来生成网格系统:

.container-fixed();
#grid > .core();
#grid > .fluid();

我知道如何设置页面使用bootstrap和更少......但我不知道如何在语义上使用网格系统.文档说明要使用什么mixins而不是如何......¿任何人都可以说明如何使用它们来创建语义网格？只是弄清楚或看看它是如何工作的:S

谢谢 !!