使导航菜单响应

Question

这是我大学毕业后第一次做CSS。 我设法写了这支笔：

悬停导航

但是，如果您调整浏览器的大小，一切都会变得混乱。 到目前为止，我只是使用引导程序制作网站原型。 但是现在我想自己学习一些设计。

我应该如何继续解决这样的问题。

这是代码： pen

Answer 1

这里的典型最佳实践是了解您的工具箱。 您不必通过包括它就可以利用所有引导程序。 但是，您可以通过简单地制作styles.css并仅使用navbar或navbar-fixed或所需的任何类，然后将自己的CSS放入styles.css中，从而合理地覆盖默认样式，这两个词都可以发挥最大的作用。

Answer 2

您应该对媒体查询进行一些研究，这将使您可以针对每种屏幕尺寸调整样式。 之后，您可以在调整屏幕大小时设置不同的填充或边距（例如）。

Answer 3

为了解决问题，您需要将其添加到班级中

.bmenu li {
    border-right: 1px solid rgba(20, 0, 0, 0.4);
    clear: both;
    display: inline-block;//This will stop your nav from overflowing over eachother
    font-size: 20px;
    font-weight: bold;
    height: 20px;
    padding: 20px;
}

我仍然会使用媒体查询，只是调整每个大小。 您可能在某个时候需要堆叠。 转到CSS-tricks.com，查看Chris在调整浏览器大小时的导航方式。 希望这可以帮助。