2

twitter-bootstrap-railsそこで、 gemをインストールしました。ジェネレーターを実行してbootstrap_and_overrides.css.lessファイルを作成しました。次に、セマンティックHTMLを記述します。したがって、書く代わりに：

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

私は書くことができるようになりたい：

<div id="foo-wrapper">
  <div class="foo">
    <div class="foo-left">Column1</div>
    <div class="foo-right">Column2</div>
  </div>
</div>

ただし、これについてlessを書き込もうとすると、クラスは適用されません。

// at the bottom of bootstrap_and_overrides.css.less
#foo-wrapper {
  .container;
}

私は何が間違っているのですか？これはサポートされていませんか？自分のスタイルを間違った場所で定義していますか？Twitter Bootstrapの操作に間違ったgemを使用していますか？

アップデート：

ここにコメントがありbootstrap_and_overrides.css.lessます：

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here

どういうわけか、ミックスインにアクセスできないようで、その理由がわかりません。

4

3 に答える 3

2

Bootstrap のmixinsを再確認する必要があります。代わりに、次のようなものが必要になります

#container {
    .center-block();
}

.foo-wrapper {
    .makeRow();
}

.foo-left {
    .makeColumn(8,0);
}

.foo-right {
    .makeColumn(4,0);
}

これらの特別な Bootstrap クラスを埋めるミックスイン。

于 2012-07-17T19:10:31.487 に答える
2

「セレクタ継承」という名前のSASS機能が必要なようです

クラスを別のクラスで拡張できます

.bordered {      
  border: 1px solid back; 
} 
#menu a {                   
  @extend .bordered;      
}

生産します：

.bordered, #menu a {
border: 1px solid back; }

LESSとSASSの比較

そのため、ブートストラップの sass 実装に移行して、必要なことを正確に行うことができます。https://github.com/thomas-mcdonald/bootstrap-sass )

于 2012-06-01T02:03:00.907 に答える
1

コンパスでhttps://github.com/thomas-mcdonald/bootstrap-sassを使用していますが、正常に動作します。

@Jesse Wolgamottが言ったように、「セレクタ継承」機能！

または、これを確認することもできます: ミックスインを使用せずに sass でクラスを再利用する方法は?

この問題は、span* を再利用する場合に一般的です:
Rails アプリで bootstrap-sass を使用して twitter ブートストラップを使用する方法は?

于 2012-11-13T03:11:12.887 に答える