我的导航栏根本没有响应

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