如何在rails app中使用twitter bootstrap和bootstrap-sass？

Question

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

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

所以在我的情况下,我认为它应该产生类似的东西:[class*="user-filter"] {float:left; margin-left:20px; }

或不？

Answer 1

这是你使用@extend,或者更确切地说,Sass无法处理通配符类匹配,这是相当不足为奇的,因为它变得相当复杂.

Bootstrap使用了许多我可能称为"非标准"方法来解决某些类的问题.您已经在上面的帖子中提到了其中一个 - [class*="span"].

当然,当你使用时@extend x,Sass正在扩展x课程.不幸的是,它(目前)无法知道通配符匹配器也会影响类的输出.所以是的,在一个理想的世界里,[class*="span"]也会扩展到定义[class*="span"], .user-filter,但Sass目前无法做到这一点.

虽然扩展.row-fluid足以包含嵌套在它下面的规则.如上所述,span类不会调整扩展跨度的通配符.

bootstrap-sass已经有一个固定宽度列/行的mixin,makeRow()和makeColumn().我刚刚推了一个makeFluidColumn()mixin,好吧,这使得一个流畅的跨度.您的代码将变为:

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

.user-filter {
  @include makeFluidColumn(2);
}

.user-list {
  @include makeFluidColumn(10);
}

不幸的是(按照惯例)它并不那么简单.Bootstrap使用此代码段重置第一个spanx类的边距,该第一个spanx类是该行的子节点.

> [class*="span"]:first-child {
  margin-left: 0;
}

但是,我们无法为每次调用重新定义此函数makeFluidColumn,因此我们必须在任何将成为流体行的第一个子元素的元素上手动设置左边距.值得注意的是,混合spanx类和makeFluidColumn类将导致第一个spanx类重置其余量,无论它是否实际上是行中的第一列.

因此,您的代码将是

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

.user-filter {
  @include makeFluidColumn(2);
  margin-left: 0; // reset margin for first-child
}

.user-list {
  @include makeFluidColumn(10);
}

它不是一个特别漂亮的解决方案,但它可以工作,并且与你在问题更新中收集的Bootstrap如何使用通配符类匹配有关.我只是把它推到2.0.2分支,所以你必须使用Bundler和Git来安装它,但我希望在接下来的几天内发布.