如何在 Bootstrap 中修复导航栏？

Question

我试图让这个模板有一个固定的导航栏： here

我是 CSS 的初学者，很抱歉这个愚蠢的问题。 当我尝试使 .masthead 具有 position:fixed 时，“Home About Contact”部分消失了。

提前致谢！

Answer 1

首先，您需要向标头添加一些 CSS，以便将其用作固定标头。 它需要一个背景颜色和一个给定的宽度：

.masthead {
    width: 700px;
    background: white;
}

然后，由于标题未与页面顶部对齐，因此您需要一些 javascript 使其粘在顶部：

<script>
$(document).ready(function() {

    var div = $('.masthead');
    var start = $(div).offset().top;
        
    $.event.add(window, "scroll", function() {
         var p = $(window).scrollTop();
         $(div).css('position',((p)>start) ? 'fixed' : 'static');
         $(div).css('top',((p)>start) ? '0px' : '');
    });
});
</script>

Answer 2

问题：设置 position:fixed 时， masthead的宽度默认变为内部元素的大小。 通常，您可以在masthead声明width:100%以便拉伸父 div 的整个宽度，但在这种情况下，在固定元素上设置百分比宽度使其根据视口的宽度进行计算：请参阅此处有关更多详细信息： 固定元素的百分比宽度？

由于其余内容的max-width为 700 像素，我们可以将masthead的宽度也设置为 700 像素，但问题是当您缩小视口时，页面的其余部分会缩小，但masthead不会。 在标头上设置max-width不起作用，因为其原始宽度小于 700px。

.masthead {
position: fixed;
width: 700px;
top: 0;
background-color: white;
border-bottom: 2px solid rgb(220,220,220);
}

请注意，我们将背景设置为白色，否则默认情况下条形图将具有透明背景，并且下面的元素只会相交——非常难看。 我们将top属性设置为 0，因此它现在附加到页面顶部并且在我们滚动时不会留下间隙。

（我添加的边框仅用于外观，如果您愿意，可以将其删除。）

由于我们将masthead设置为fixed位置，因此它现在已从页面流中移除，因此页面中的所有其他内容就像masthead不存在一样。 这导致了一个问题：页面中的所有内容都向上移动，顶部的<hr />被隐藏。 为了解决这个问题，我们添加了一个margin-top: 50px; 到顶部<hr /> ，一切都向下移动。

由于 bootstrap 中.nav的默认边距样式（ margin-bottom: 20px; margin-left: 0;) ，“主页关于联系人”部分最终看起来有点尴尬。 我们通过将边距设置为更合适的值来解决这个问题： margin: 14px 0;

快速说明：我将所有这些样式应用为 chrome web 检查器中的内联样式，以便它们覆盖任何其他属性

编辑：实际上，如果您只是使用网络检查器从文档中删除 HR，它也能很好地工作

Answer 3

查看boostrap 导航栏文档

这是使用引导程序的固定导航栏的示例：

       <div class="navbar navbar-fixed-top" style="position: absolute;">
          <div class="navbar-inner">
            <div class="container" style="width: auto; padding: 0 20px;">
              <a class="brand" href="#">Title</a>
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
              </ul>
            </div>
          </div>
        </div>

Answer 4

这是一个适用于position: fixed的导航栏：

<div class='container'>
    <div class='navbar'>
        <div align='right'> <a class='menu1 menu-item'>Home</a>
 <a class='menu2 menu-item'>About</a>
 <a class='menu3 menu-item'>Contact</a>

        </div>
    </div>
</div>

http://jsfiddle.net/H9mMk/3/

Answer 5

向班级添加“固定顶部”将完成这项工作：

    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
     <!-- Navbar content -->
    </nav>

来源： https : //www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php