ブートストラップの背景色は小さな画面でのみ機能します

Question

異なるdivの背景色が異なります。画面がxsサイズの場合、＃バックグラウンドが適用されるのはなぜですか？大きな画面では#suggestionの色ですが、#backgroundは、#suggestionsの子として定義されています。

#suggestion { 
 
\t background-color: #d9d9d9; 
 
} 
 

 
div div div.suggestions_button { 
 
\t width: 100%; 
 
\t height: 60px; 
 
\t margin-top: 2%; 
 
\t margin-bottom: 0.5%; 
 
\t text-align: left; 
 
\t background-color: white; 
 
\t box-shadow: 8px -8px 20px #404040; 
 
} 
 

 

 
#background { 
 
\t background-color: green; 
 
}

<div class="row"> 
 
    <div class="col-xs-1"></div> \t 
 
\t <div id="suggestion" class="col-xs-10"> \t 
 
\t <div class="suggestions_button" data-toggle="collapse" data-target="#demo1"> 
 
\t \t <p>Suggestion 1</p> 
 
\t </div> 
 
\t <div id="background"> 
 
\t \t <div id="demo1" class="collapse"> 
 
\t \t <div id="YouTubeVideo" class="col-sm-12 col-md-6"> 
 
\t \t  <div class="embed-responsive embed-responsive-16by9"> 
 
\t \t \t <iframe id="iFrame" src="youtube.com"></iframe> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div id="text" class="col-sm-12 col-md-6"> 
 
\t \t  <p> Wort 1 </p> 
 
\t \t </div> 
 
\t  </div> 
 
\t </div> \t 
 
\t </div> 
 
    <div class="col-xs-1"></div> 
 
</div>

Answer 1

あなたの質問は私には明らかではないが、私が見つけたすべては、異なるデバイスサイズの背景色についてです。 すべてのブレークポイントで動作しますが、私が言いたいことがいくつかあります：

1- "あなたが定義した場合、他のsizes.Forの例：

<div class="col-xs-1"></div> 

をあなたが彼らのために新しいCOLSを定義する場合を除き、このは "COL-XS-1 COL-SM-1 COL-MD-1 COL-LG-1" を意味します別々に。

2さまざまなデバイスサイズで異なるプロパティを定義するために、異なるメディアクエリを使用できます。これらのクエリの外に出ることは、モバイル "xs"に適用されます。 開始するにはいいリンクです：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

3スタイリングには、LessまたはSassを使用することを強くお勧めします。

4-クラスを定義するために、 "div div .suggestions_button"と書く必要がない場合は、クラスを簡単に定義して、使用したいすべての "div"で使用できます。

#suggestion { 
 
\t background-color: yellow; 
 
} 
 

 
.suggestions_button { 
 
\t width: 100%; 
 
\t height: 60px; 
 
\t margin-top: 2%; 
 
\t margin-bottom: 0.5%; 
 
\t text-align: left; 
 
\t background-color:blue; 
 
\t box-shadow: 8px -8px 20px #404040; 
 
} 
 
#background { 
 
\t background-color: green; 
 
}

<div class="row"> 
 
    <div class="col-xs-1">Hello World </div> \t 
 
    <div id="suggestion" class="col-xs-10"> \t 
 
     <div class="suggestions_button" 
 
      data-toggle="collapse" 
 
      data-target="#demo1"> 
 
     <p>Suggestion 1</p> 
 
     </div> 
 
     <div id="background" class="col-xs-12"> 
 
     <div id="demo1" class="collapse"> 
 
      <div id="YouTubeVideo" class="col-sm-12 col-md-6"> 
 
      <div class="embed-responsive embed-responsive-16by9"> 
 
       <iframe src="http://www.who.com.au/"></iframe> 
 
      </div> 
 
      </div> 
 
\t \t \t 
 
     </div> 
 
     <div class="col-xs-1">Wort 1</div> 
 
     </div> \t 
 
     
 
    </div> 
 
    
 
</div>