如何在Rails应用程序中将Twitter Bootstrap与Bootstrap-Sass结合使用？ [英] How to use twitter bootstrap with bootstrap-sass in rails app?

问题描述

我对此很陌生，但是我无法解决问题。

I'm quite new to this, but i cannot figure out the problem.

在twitter bootstrap中，我会使用：

In twitter bootstrap i would use :

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

一切正常。但是我不想直接将spanX和spanY写入我的html文件中，而是想给出有意义的类名，例如：

And it all works fine. But i do not want to write spanX and spanY directly into my html file, rather i would like to give meaningful class names, for example:

<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文件？我尝试了以下操作，但是它不起作用（不显示两列）：

Given the fact, that i'm using https://github.com/thomas-mcdonald/bootstrap-sass, how should i write my scss file? I've tried the following, and it does not work (two columns are not displayed):

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

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

.user-filter {
    @extend .span2;
}

.user-list {
    @extend .span10;
}

如果我查看生成的代码，在我看来一切都应该ok：

If i look at the generated code, it seems to me that everything should be ok:

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

，依此类推。

我在做什么错？

更新：

好吧，只是要弄清楚什么是错-列以行（一个接一个）的方式布置，而不是像真正的列（一个接一个）排列，例如：

ok, just to be clear what is wrong - the columns are laid out as rows (one after another) rather like true columns (one next to each other), eg.:

使用引导程序：Column1 Column2

，其中包含我的自定义类：

第一列

第二列

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

我已经检查了Chrome中的元素布局，并且似乎引导类具有float属性，而我的-不。看着css源，我看到这样的类：

I've inspected the elements layout in Chrome and it seems that bootstrap classes have float property, and mine - no. Looking at css source i see classes like this:

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

所以在我的情况下，我认为它应该生成：
[class * = user-filter] {
float：left;
margin-left：20px;
}

So in my case i think it should generate something like : [class*="user-filter"] { float: left; margin-left: 20px; }

还是不？

推荐答案

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

It's your use of @extend, or rather, Sass' inability to deal with wildcard class matching, which is rather unsurprising, since it gets rather complex.

Bootstrap使用许多我可能称为非标准方法的方法来处理某些类。您在上面的帖子中提到了其中之一- [class * = span] 。

Bootstrap uses a number of what I might refer to as 'nonstandard' methods to address some classes. You've mentioned one of those in your post above - [class*="span"].

自然，当您使用 @extend x 时，Sass扩展了 x 类。不幸的是，（目前）它无法知道通配符匹配器也会影响该类的输出。因此，是的，在理想世界中， [class * = span] 也将扩展为定义 [class * = span]， .user-filter ，但Sass当前无法做到这一点。

Naturally, when you use @extend x, Sass is extending the x class. Unfortunately, it (currently) has no way of knowing that a wildcard matcher also affects the output of the class. So yes, in an ideal world, [class*="span"] would also be extended to define [class*="span"], .user-filter, but Sass can't currently do that.

同时扩展 .row-fluid 足以包含嵌套在其下的规则。

While extending .row-fluid is enough to include the rules nested underneath it wrt. the span classes, as per above, it won't adjust the wildcards for extended spans.

bootstrap-sass已经具有用于固定宽度列/行的混合， makeRow（）和 makeColumn（）。我刚刚推送了一个 makeFluidColumn（） mixin，这很好地进行了扩展。您的代码将变为：

bootstrap-sass already had a mixin for fixed width columns/rows, makeRow() and makeColumn(). I've just pushed a makeFluidColumn() mixin, that, well, makes a fluid span. Your code would then become:

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

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

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

不幸的是（并非像往常一样），它并不是那么简单。 Bootstrap使用此代码段重置该行的子级的第一个spanx类的边距。

Unfortunately (as per usual) it's not quite so simple. Bootstrap uses this snippet to reset the margin on the first spanx class that is a child of the row.

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

但是，我们无法为每个的调用重新定义makeFluidColumn ，因此我们必须在将成为流体行的第一个子元素的任何元素上手动设置没有左边距。还值得注意的是，将spanx类和 makeFluidColumn 类混合使用会导致第一个spanx类的边距重置，无论它实际上是否是该行的第一列。

However, we cannot redefine this for each call of makeFluidColumn, and so we must manually set no margin-left on any element that will be the first child of a fluid row. It's also worth noting that mixing spanx classes and makeFluidColumn classes will cause the first spanx class to have its margin reset, regardless of whether it's actually the first column in the row.

因此，您的代码为

.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进行安装，但是我希望在接下来的几天内发布该版本。

It's not a particularly pretty solution, but it works, and is all to do with how Bootstrap uses wildcard class matching, as you gathered in your question update. I've only just pushed this to the 2.0.2 branch, so you'll have to use Bundler with Git to install it, but I'm hoping for a release in the next couple of days.

这篇关于如何在Rails应用程序中将Twitter Bootstrap与Bootstrap-Sass结合使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！