为什么我的twitter bootstrap导航栏继续前进？

当我缩小浏览器尺寸时，如何阻止我的twitter引导程序导航栏上下移动或甚至位于图像按钮后面？ Bootstrap CSS文件是我下载的最新版本。为什么我的twitter bootstrap导航栏继续前进？

最初，我创建自己的上一个导航栏能够固定到一个位置，该位置设法与另一个图片重叠。

下面的代码是我自己的导航栏，我创建（不是我的TWITTER BOOTSTRAP css代码）。引导CSS代码相当标准化，可以下载

#nav { 
background: #292929; 
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px); 
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); 
position:absolute; 
left:0%; 
top:10%; 
margin: 0px; 
padding: 0; 
border: 1px yellow; 
border-bottom: none; 
width:100%; 
}

不幸的是，这是我的twitter引导的其他方式。我是twitter新手，所以我很困惑，当我去看他们的CSS。我试图改变立场，但它仍然是一样的。

UPDATE

我能够让我的导航栏twitterbootstrap通过与另一

<div id="overalltwitternavbar"> 
<div class="navbar navbar-inverse navbar-static-top"> 
<div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="#">iPolice</a> 
     <div class="nav-collapse"> 
      <ul class="nav"> 
       <li class="divider-vertical"></li> 
       <li><a href="#">Home</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="Login.aspx">Login</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

包裹它重叠我的幻灯片图像和ImageButton的这是我的CSS包装div

#overalltwitternavbar { 
position:relative; 

}

但是，我仍然无法强制导航栏固定到一个位置，并相应地折叠菜单。

来源

2013-08-22 Teo Chuen Wei Bryan

其实，这是错误的，人们往往往往忽视了

只需更换

<div class="navbar navbar-inverse navbar-static-top">

随着

<div class="navbar navbar-inverse navbar-fixed-top">

Twitterbootstrap有多个CSS现成的所有用户。因此，实际上通过改变css类id将强制导航栏被固定，而不是静态的，这是由css名称本身来说是不言自明的。

对于那些感到困惑的人，您可以随时参考此link以获得更好的解释。

来源

2013-08-27 01:10:14

您是否尝试过设置z-index：1000并使用顶部的像素值：而不是百分比？

更改z-index应确保它保持在其他元素之上，并且使用像素值应确保在调整浏览器大小时不会四处移动。您可能仍会在较小的屏幕上看到一些问题，但您可以更轻松地使用媒体查询来更正此问题。

来源

2013-08-22 02:59:34 nobody

你的意思是哪个z-index？ jquery和CSS文件中有大量的z-index。 –

'背景：＃292929; background：-moz-linear-gradient（top，black，＃3c3c3c 1px，＃292929 25px）; （黑色），色彩停止（4％，＃3c3c3c），到（＃292929））;背景：-webkit-gradient（线性，左上，左25， position：absolute; left：0; top：50px; margin：0px; 填充：0; border：1px yellow; border-bottom：none; 宽度：100％; z-index：1000;' 我打算将z-index作为属性添加到#nav – nobody

请仔细阅读我的问题。我上面给出的代码是第一个导航栏，但不是我的twitter引导程序。 –

它可能与响应设置有关。试着将相同的代码在一组媒体查询，所以......

@media (max-width: 1200px) { 
    #nav { 
     position:absolute; 
     left:0%; 
     top:10%; 
     margin: 0px; 
     padding: 0; 
     border: 1px yellow; 
     border-bottom: none; 
     width:100%; 
     z-index:9999; 
    } 
}

很显然，我不知道在什么屏幕尺寸的导航栏是在搞乱了，所以你就需要调整像素宽度在查询中。

我还建议应用z-index来解决重叠问题。只需将其粘贴在媒体查询中。

来源

2013-08-22 04:32:56 itsclarke

为什么我的twitter bootstrap导航栏继续前进？

回答

相关问题