Bootstrap Hintergrundfarbe funktioniert nur in kleinen Bildschirm

Question

Ich habe verschiedene Hintergrundfarben für die verschiedenen Divs. Warum gilt #background nur, wenn mein Bildschirm xs-Größe ist? Auf allen größeren Bildschirmen hat es #suggestion 's Farbe, obwohl #hintergrund ist ein extra definiert Kind # Vorschläge.

#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

Ihre Frage ist mir nicht klar, aber alles, was ich in verschiedenen Gerätegrößen über die Hintergrundfarbe herausgefunden. Es funktioniert in allen Haltepunkten, aber es gibt einige Punkte, die ich erwähnen möchte:

1- Was auch immer "cols" Sie für "xs" definieren, gilt für die größere Größe, es sei denn, Sie definieren ein zusätzliches "col" für das andere sizes.For Beispiel, wenn Sie definieren:

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

bedeutet dies, "col-xs-1 col-sm-1 col-md-1 col-lg-1", es sei denn, wenn Sie für sie neue cols definieren separat.

2- Sie können verschiedene Medienabfragen verwenden, um unterschiedliche Eigenschaften in verschiedenen Gerätegrößen zu definieren. Was auch immer außerhalb dieser Fragen passiert, gilt für mobile "xs". Es ist ein guter Link zu beginnen mit: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

3- Ich empfehle dringend, Less oder Sass zum Stylen zu verwenden.

4 - um eine Klasse zu definieren, die Sie nicht schreiben müssen "div div .suggestions_button" können Sie die Klasse einfach definieren und in jedem "div" verwenden, das Sie verwenden möchten.

#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>