Bootstrap背景色僅適用於小屏幕

我對不同的div有不同的背景色。爲什麼＃背景只適用於，如果我的屏幕是xs大小？在所有更大的屏幕上，它有＃誘惑的顏色，儘管#background是#suggestions的額外定義的孩子。Bootstrap背景色僅適用於小屏幕

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

來源

2016-12-29 Jonas

你的問題我不太清楚，但所有我發現是關於不同器件尺寸的背景顏色。它適用於所有斷點，但我想提及一些要點：

1-您爲「xs」定義的任何「cols」將應用於較大的尺寸，除非您定義了一個額外的「col」對於其他sizes.For例如，如果你定義：

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

，這意味着「COL-XS-1 COL-SM-1 COL-MD-1 COL-LG-1」，除非你爲它們定義新的cols分別。

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>

來源

2016-12-29 01:28:38 Negin

Bootstrap背景色僅適用於小屏幕

回答

相關問題