我使用twitter bootstrap开发响应式网站....
当我缩小浏览器窗口时,导航栏会折叠....
但在折叠的导航栏中,我需要显示背景颜色....
但它显示背景图像。如何用background-color: #14486b;
替换它
我不确定这个背景图像会在哪里出现
<div class="nav-collapse in collapse" style="height: auto;">
<ul class="nav">
<li class="active"><a href="/docs/examples/product.html">Product</a></li>
<li><a href="/docs/examples/solution.html">Solutions</a></li>
<li><a href="/docs/examples/service.html">Services</a></li>
<li class="iphonePartnerLink"><a href="/docs/examples/partner.html">Partners</a></li>
<li class="iphoneContactLink"><a href="/docs/examples/contact.html">Contact</a></li>
</ul>
<ul class="nav" id="navSecond">
<li class=""><a href="/docs/examples/partners.html">Partners</a></li>
<li><a href="/docs/examples/contact.html">Contact</a></li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div>
答案 0 :(得分:0)
尝试分析图像的来源。 这样做的好工具是Firebug for Firefox https://addons.mozilla.org/de/firefox/addon/firebug/ 或Chrome的开发工具(在Chrome中按F12打开它)。在这两个工具中,您可以检查DOM树的单个组件,并查看所有附加的CSS样式(及其来源)。
如果原因是背景图像,您可以按以下方式覆盖样式:
#idOfComponent {
background-image:none
}
答案 1 :(得分:0)
您必须使用媒体查询以背景颜色替换图像:
@media (min-width: 768px) and (max-width: 979px) {
.navbar-inner{
background-image: url("http://www.defie.co/designerImages/bg_bar.png");/*remove this */
background-color:#14486b;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.navbar-inner{
background-image: url("http://www.defie.co/designerImages/bg_bar.png");
background-color:#14486b;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
.navbar-inner{
background-image: url("http://www.defie.co/designerImages/bg_bar.png");
background-color:#14486b;
}
}
如果您想将导航栏固定在最上面:
.navbar {
left: 0;
position: absolute;/*remove this line if you want to fix it */
right: 0;
top: 0;
}
编辑评论后:你已经在媒体查询中将你的背景图像设置为无,并且颜色被注释掉如下:
@media (max-width:980px){
.navbar-inverse .navbar-inner{
background-image: none;
/*background-color: red;*/
}
}
@media (max-width: 767px) {
.navbar-inverse .navbar-inner {
background-image: none;
/*background-color: red;*/
}
}
@media (max-width: 480px) {
.navbar-inverse .navbar-inner{
background-image: none;
/*background-color: red;*/
}
}
请将样式替换为我上面提到的样式。