为什么我的推特引导导航栏一直在移动？

Question

当我减小浏览器大小时，如何阻止我的 twitter 引导导航栏上下移动，甚至在我的图像按钮后面移动？ bootstrap CSS 文件是我下载的最新文件。

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

下面的代码是我自己创建的导航栏（不是我的 TWITTER BOOTSTRAP css 代码）。 Bootstrap 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 bootstrap 的新手，所以当我去看他们的 CSS 时我很困惑。我尝试将位置更改为固定位置，但还是一样。

更新

我可以让我的 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>

这是我用于封装 div 的 css

#overalltwitternavbar {
position:relative;

}

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

Answer 1

这可能与响应式设置有关。尝试将相同的代码放在一组媒体查询中，这样...

@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 来帮助解决重叠问题。只需将其粘贴在媒体查询中即可。

Answer 2

实际上，这是一个人们往往容易忽视的错误

只需替换

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

有

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

Twitterbootstrap 为所有用户准备了多个 css。因此，实际上通过更改 css 类 id 将强制导航栏固定而不是静态，这对于 css 名称本身来说是不言自明的。

有疑惑的朋友可以随时参考这个link来获得更好的解释。

Answer 3

您是否尝试过设置 z-index:1000 并为 top: 使用像素值而不是百分比？

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