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引导程序。我是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>

这是我的css for encasing div

#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并使用顶部的像素值：而不是百分比？

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

为什么我的twitter bootstrap导航栏一直在移动？

3 个答案: