Bootstrap 背景颜色仅适用于小屏幕

Question

我为不同的 div 设置了不同的背景颜色。为什么 #background 只适用于我的屏幕是 xs 尺寸的？在所有较大的屏幕上，它都有 #suggestions 的颜色，尽管 #background 是 #suggestions 的一个额外定义的子元素。

#suggestion {
	background-color: #d9d9d9;
}

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


#background {
	background-color: green;
}

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

Answer 1

我不清楚您的问题，但我发现的只是不同设备尺寸的背景颜色。 它适用于所有断点，但有几点我想提一下：

1- 您为“xs”定义的任何“cols”都将适用于较大的尺寸，除非您为其他尺寸定义了额外的“col”。例如，如果您定义：

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

这意味着“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 {
	background-color: yellow;
}

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

<div class="row">
  <div class="col-xs-1">Hello World </div>	
    <div  id="suggestion" class="col-xs-10">	 
      <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>
		 	 
        </div>
         <div class="col-xs-1">Wort 1</div>
      </div>	
     
  </div>
  
</div>