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背景色仅适用于小屏幕

回答

相关问题