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

Question

我为不同的 div 使用了不同的背景颜色。为什么 #background 仅适用于我的屏幕尺寸为 xs 的情况？在所有更大的屏幕上，它都有 #suggestion 的颜色，尽管 #background 是 #suggestions[= 的额外定义子项25=].

#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" 将适用于较大的尺寸，除非您为另一个 sizes.For 示例定义额外的 "col" 如果你定义：

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

这意味着 "col-xs-1 col-sm-1 col-md-1 col-lg-1" 除非您单独为它们定义新的列。

2- 您可以使用不同的媒体查询来定义不同设备尺寸的不同属性。这些查询之外的任何内容都将适用于移动 "xs"。这是一个很好的 link 开始: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

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

4- 定义 class 你不需要写 "div div .suggestions_button" 你可以很容易地定义 class 并在你想要的每个 "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>

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

Bootstrap background color works only in small screen

css

background-color

twitter-bootstrap