異なる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>