Question

我对不同的div有不同的背景颜色。为什么 #background 仅适用，如果我的屏幕是xs大小的？在所有较大的屏幕上，它具有 #suggestion 的颜色，但 #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-什么＆＃34; cols＆＃34;你正在定义＆＃34; xs＆＃34;将适用于更大的尺寸，除非您定义额外的＆＃34; col＆＃34;对于其他尺寸。例如，如果您定义：

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

这意味着＆＃34; col-xs-1 col-sm-1 col-md-1 col-lg-1＆＃34;除非你单独为它们定义新的cols。

2-您可以使用不同的媒体查询来定义不同设备大小的不同属性。除了这些查询以外的内容将适用于移动＆＃34; xs＆＃34;。这是一个很好的链接：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

3-我强烈建议您使用Less或Sass进行样式设计。

4-用于定义一个你不需要编写的类＆＃34; div div .suggestions_button＆＃34;您可以轻松定义班级并在每个＆＃34; div＆＃34;中使用它。你想用。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: