13

私はこれにかなり慣れていませんが、問題を理解できません。

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 ファイルをどのように記述すればよいですか? 次のことを試しましたが、うまくいきません (2 つの列が表示されません)。

@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
カスタム クラスの場合:
最初の列
2 番目の列

Chrome で要素のレイアウトを調べたところ、ブートストラップ クラスには float プロパティがあり、私のものはないようです。CSS ソースを見ると、次のようなクラスが表示されます。

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

したがって、私の場合、次のようなものを生成する必要があると思います: [class*="user-filter"] { float: left; 左マージン: 20px; }

か否か？

4

3 に答える 3

19

というか@extend、Sass がワイルドカード クラス マッチングを処理できないことが原因です。かなり複雑になるため、これは当然のことです。

Bootstrap は、いくつかのクラスに対処するために、私が「非標準」メソッドと呼んでいるものをいくつか使用します。上記の投稿でそれらの 1 つについて言及しました - [class*="span"]。

当然、@extend xSassを使用するとxクラスが拡張されます。残念ながら、(現在) ワイルドカードマッチャーがクラスの出力にも影響することを知る方法はありません。そうです、理想的な世界で[class*="span"]は も定義するように拡張されます[class*="span"], .user-filterが、Sass は現在それを行うことができません。

拡張.row-fluidは、その下にネストされたルールを含めるには十分です。上記のスパン クラスでは、拡張スパンのワイルドカードは調整されません。

bootstrap-sass には、固定幅の列/行の mixin が既に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ため、流動的な行の最初の子となる要素には手動で no 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 ブランチにプッシュしたばかりなので、Git で Bundler を使用してインストールする必要がありますが、数日以内にリリースされることを期待しています。

于 2012-03-28T14:28:33.033 に答える
4

あなたが正しいです。Twitterはここでアニパタを押しています。この記事を参照してください。

http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

于 2012-06-16T23:51:35.273 に答える
0

gem を使用boostrap-sass 2.3.2.2して、ブートストラップのミックスインに基づいて独自のミックスインを作成し、CSS クラスをブートストラップ.spanクラスのように動作させる必要がありました。

// private mixin: add styles for bootstrap's spanX classes
@mixin _makeFluidSpan($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
  @include input-block-level();
  float: left;
  margin-left: $fluidGridGutterWidth;
  *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
  @include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
}

// thats what you should use
@mixin makeFluidSpan($gridColumns) {
  @media (min-width: 980px) and (max-width: 1199px) {
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
  }
  @media (min-width: 1200px) {
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth1200, $fluidGridGutterWidth1200);
  }
  @media (min-width: 768px) and (max-width: 979px) {
    @include _makeFluidSpan($gridColumns, $fluidGridColumnWidth768, $fluidGridGutterWidth768);
  }
  &:first-child {
    margin-left: 0;
  }
  @media (max-width: 767px) {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

例：

  .like-span3 { // this class acts like .span3
    @include makeFluidSpan(3);
  }
于 2014-10-29T09:39:55.237 に答える