1

Emberjs アプリにブートストラップを使用しています...配列をループしてチェックボックスを描画しています...しかし、スクリプトタグはインラインチェックボックス間の間隔に影響します...

 <div class="row-fluid">
     <script id="metamorph-933-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4029" class="ember-view ember-checkbox" type="checkbox">        
        Firstchance 
      </label>      
   <script id="metamorph-933-end" type="text/x-placeholder"></script><script id="metamorph-934-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4030" class="ember-view ember-checkbox" type="checkbox">        
        secondchance        
      </label>      
   <script id="metamorph-934-end" type="text/x-placeholder"></script><script id="metamorph-935-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4031" class="ember-view ember-checkbox" type="checkbox">        
        thirdchance     
      </label>      
   <script id="metamorph-935-end" type="text/x-placeholder"></script><script id="metamorph-936-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4032" class="ember-view ember-checkbox" type="checkbox">        
        finalchance     
      </label>      
   <script id="metamorph-936-end" type="text/x-placeholder"></script><script id="metamorph-937-end" type="text/x-placeholder"></script>


  </div>

これは、間隔が適切でないフィドルです。

http://jsfiddle.net/4XZMb/1249/

そして、ここにスクリプトタグのない適切な間隔のフィドルがあります

http://jsfiddle.net/4XZMb/1248/

私の質問は、スクリプトタグが私のスタイルにどのように影響するかということです...???

そして、余分なスタイルを追加せずにここで適切な間隔を取得するにはどうすればよいですか...??

4

1 に答える 1

3

「適切な間隔」バージョンには<label class="checkbox inline">、他のタグに続くタグがあり<label class="checkbox inline">ます。これらのタグは、ブートストラップの次の CSS によってスタイル設定されます。

.checkbox.inline + .checkbox.inline {
margin-left: 10px;
}

スクリプト タグのあるバージョンでは、ラベル タグの周りにスクリプト タグが挿入されています。これにより、ラベル タグが上記のセレクターと一致しなくなり、左マージンが失われます。簡単な回避策は、独自の CSS に独自のクラスを追加することです。

.fluid-row-checkbox {
margin-left: 10px;
}

次に、このクラスを 2 番目、3 番目、4 番目のラベルに追加します。

<label class="checkbox inline fluid-row-checkbox">

これに対処するためのおそらくより良い方法は他にもありますが、これが最も簡単です。

于 2013-02-01T11:51:11.067 に答える