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

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

Answer 2

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 3

让我们考虑你的样式表的作用，

身高：80vh;

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

Answer 4

将height属性设置为auto，它将正常工作。

height: auto

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

4 个答案: