ruby-on-rails – 如何在rails应用程序中使用bootstrap-sass的twitter bootstrap？

我对此很新,但我无法弄明白这个问题.

在twitter引导我将使用：

<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中的元素布局,似乎bootstrap类有float属性,而我的 – .看看css源码我看到这样的类：

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

所以在我的情况下,我认为应该产生一些像：
[class * =“user-filter”] {
float：left;
margin-left：20px;
}

或不？

解决方法

这是您使用@extend,或者说,Sass无法处理通配符类匹配,这是非常不奇怪的,因为它变得相当复杂.

Bootstrap使用一些我可以称之为“非标准”的方法来解决一些类.你在上面提到了你的帖子之一 – [class * =“span”].

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

而扩展的流体就足以包含嵌套在其下的规则wrt.跨度类,如上所述,它不会调整扩展跨域的通配符.

bootstrap-sass已经对固定宽度的列/行进行了混合,makeRow()和makeColumn().我刚刚推出了一个makeFluidColumn()mixin,那样做会很流畅.你的代码将变成：

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

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

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

不幸的是(按照惯例)这不是那么简单. Bootstrap使用此片段来重置作为该行的子代的第一个spanx类的边距.

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

但是,我们无法为makeFluidColumn的每次调用重新定义这一点,因此我们必须在任何将成为流体行的第一个子节点的元素上手动设置margin-left.还值得注意的是,混合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来安装它,但我希望在接下来的几天内发布.