html - 我的导航栏根本没有响应

Question

我正在学习 HTML 和 CSS，我做了一个导航栏(见下图)但它根本没有响应，在我的笔记本电脑上查看它或减小浏览器的大小，它移动了位置。

有人可以帮我解释一下为什么它没有响应/不粘在原来的地方吗。

非常感谢，你们都很棒!

编辑:

我正在测试 bootstrap 因为它的响应功能，但我以前从未使用过它。我如何放置导航栏，红色框在哪里？

Answer 1

问题是您为菜单定义了固定参数:

#NewNavBar {
    margin-left:208px;
    width:756px;
    height:40px;
}

和

#NewNavB {
position:relative;
margin-left:208px;
margin-bottom:15px;
width:756px;
height:30px;
}

在这种情况下您可以删除 margin-left 但当然它不会使您的导航栏响应。如果你想做响应，你需要使用 % 或 em 的宽度，并根据你的断点给出不同的样式。

例如在我的一个网站上我使用了这样的断点

<link rel="stylesheet" href="stylesheets/small.css" media="all" />
<link rel="stylesheet" href="stylesheets/print.css" media="print" />
<link rel="stylesheet" href="stylesheets/medium.css" media="screen and (min-width: 32em) and (max-width: 64em), projection and (min-width: 32em) and (max-width: 64em), handheld and (min-width: 32em) and (max-width: 64em)" />
<link rel="stylesheet" href="stylesheets/large.css" media="screen and (min-width: 64.0625em), projection and (min-width: 64.0625em)" />

您可以做的最简单的事情是从两者中删除 margin-left 并将两者的 width:756px; 更改为 width: 100% 然而，正如我所说，这并不意味着您的导航将在所有分辨率下工作(在更小的分辨率下它不会)。 Jsfiddle