twitter-bootstrap 如何使背景颜色在移动设备上具有响应性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25472465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make the background color responsive on mobile devices?
提问by krillebimbim
I have created a website using bootstrap and the responsive features works fine, except for the background color of the div. The elements (images) are stacked but the background color remains only behind the first image in the row. I am looking for a way to extend the background-color on mobile devices.
我使用引导程序创建了一个网站，响应功能运行良好，除了 div 的背景颜色。元素（图像）堆叠在一起，但背景颜色仅保留在行中的第一个图像之后。我正在寻找一种方法来扩展移动设备上的背景颜色。
HTML:
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:
CSS：
#omos {
background-color: #f7f7f7;
height: 80vh;
clear: both;
text-align: center;
}
I have tried several options but no one seems to solve the problem. Does anyone know what to do?
我尝试了几种选择，但似乎没有人能解决问题。有谁知道该怎么做？
回答by dingo_d
Remove the heightproperty of the div, and it should work.
删除heightdiv的属性，它应该可以工作。
回答by I wrestled a bear once.
Bootstrap uses media queries to show things differently on differnet sized screens. If you're saying your CSS works on desktop but not on mobile, it would be because you're not using media queries.
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;
}
}
回答by CodeBlake
let's think about what your style sheet does,
让我们想想你的样式表是做什么的，
height: 80vh;
高度：80vh；
that makes us do something that is 80% of the viewports height, so if our div stacks outside of that when switching to 12 col it is not going to get the color, as your color is not based on the div, but is based relative to the viewport, twitters media queries however will change your child elements and override this wrapping divs height, so you get stuck, I'd see if min-height will work, or remove height all together if possible(not sure what you're vision is exactly)
这让我们做的事情是视口高度的 80%，所以如果我们的 div 在切换到 12 col 时超出了这个高度，它就不会得到颜色，因为你的颜色不是基于 div，而是基于相对的到视口，twitters 媒体查询但是会改变你的子元素并覆盖这个包装 div 的高度，所以你被卡住了，我会看看 min-height 是否可以工作，或者如果可能的话一起删除高度（不确定你是什么愿景正是）
回答by Atchyut Nagabhairava
Set the height property to auto, it will work fine.
将高度属性设置为自动，它会正常工作。
height: auto
height: auto
