2016-11-09 40 views
0

私は、ブートストラップ列のページを書きましたが、私のクラスのいずれかが動作しません:このCSSルールはどのように動作させることができますか?

.serviceDetails { 

    .height { 
    line-height: 12px; 
    margin-top: 8px; 
    } 

    p.text , span.text { 
    font-size:11px; 
    } 

    .icon { 
    border:11px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    } 
} 

これは私のhtmlです:.iconクラスが動作しないいくつかの理由

<section class="serviceDetails"> 
     <div class="row"> 
     <div class="col-md-3 col-xs-12"> 
        <div class="col-md-2 hidden-xs icon"> 
        <i class="fa fa-bandcamp" aria-hidden="true"></i> 
     </div> 
.... 

?詳細:

+2

'.serviceDetails {}'の内部にネストされているからです。 –

+0

@DanielD申し訳ありません私はCSSで何かを忘れました。 –

+1

LessまたはSassのようなCSSのプリプロセッサを使用していて、CSSにコンパイルしていますか?そうでない場合は、動作しません。 Cssはあなたにそのような規則を入れ子にさせません。 –

答えて

1

codepenネストの外であなたのCSSを取るには、何が必要ありません

.icon { 
    border: solid pink 11px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    } 

http://codepen.io/anon/pen/dOYgaV

編集:追加色と、国境にcodepenにも変更プリプロセッサ設定を埋めます。

上に書いSASSも問題を解決するだろうプリコンパイル
.serviceDetails { 

    .height { 
    line-height: 12px; 
    margin-top: 8px; 
    } 

    p.text , span.text { 
    font-size:11px; 
    } 

.icon { 
    border: solid pink 11px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    } 

} 

http://www.sassmeister.com/ - オンラインコンパイラ http://sass-lang.com/ - SASSドキュメント

これは、通常のCSSが内部にネストクラス規則にあなたを許可していないという事実によるものですsassが入れ子をサポートしているクラスや、他の多くのクールな機能をサポートしています。

+0

私はちょうどそれを試して、アイコンに境界線がありません? –

+0

あなたは次元を追加しましたが、色やタイプはCSS :-)に入れませんでした。 –

+0

@JonSG True、私はちょうど「この仕事をどうすればいいですか? –

関連する問題