如何使背景颜色在移动设备上响应？

Question

我使用 bootstrap 创建了一个网站，响应式功能运行良好，除了 div 的背景颜色。元素（图像）被堆叠，但背景颜色仅保留在行中的第一个图像后面。我正在寻找一种在移动设备上扩展背景颜色的方法。

HTML：

<div id="omos">
 <div class="row">
 <div class="col-md-6 col-xs-12">
 <h2>Kristoffer Andreasen</h2>
 <a href="http://dk.linkedin.com/pub/kristoffer-andreasen/4b/2a0/645/"><img     style="height:280px; width:420px;" src="http://i.imgur.com/874qJmM.png" class="img-responsive"></a>
 <div class="Krille">
 <p>Indhold</p>
 <p>Marketing</p>
 <p>Webdesign</p>
 </div>
 </div>
 <div class="col-md-6 col-xs-12">
 <div class="Kalli">
 <h2>Kasper Hjortsballe</h2>
 <a href="http://dk.linkedin.com/pub/kasper-hjortsballe/55/942/5b9"><img style="height:200px; width:200px;" src="http://i.imgur.com/kTleong.png" class="img-responsive"></a>
 <p>Programmør</p>
 <p>Layout</p>
 <p>Grafik</p>
 </div>
 </div> 
 </div>
 </div>

CSS：

#omos {
background-color: #f7f7f7;
height: 80vh;
clear: both;
text-align: center;
}

我已经尝试了几种选择，但似乎没有一个可以解决问题。有谁知道该怎么做？

Answer 1

将高度属性设置为自动，它会正常工作。

height: auto

Answer 2

让我们想想你的样式表是做什么的，

高度：80vh；

这使我们做的事情是视口高度的 80%，所以如果我们的 div 在切换到 12 col 时堆叠在此之外，它不会获得颜色，因为您的颜色不是基于 div，而是是基于视口的，twitters 媒体查询但是会改变你的子元素并覆盖这个包装 div 的高度，所以你会卡住，我会看看 min-height 是否可以工作，或者如果可能的话一起删除高度（不确定是什么你的愿景是准确的）

Answer 3

Bootstrap 使用媒体查询在不同大小的屏幕上显示不同的内容。如果您说您的 CSS 可以在桌面设备上运行，但不能在移动设备上运行，那是因为您没有使用媒体查询。

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    /* your mobile css, change this as you please */
    #omos {
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    /* your desktop css */
    #omos {
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    }
}

Answer 4

删除 div 的 height 属性，它应该可以工作。