使导航菜单响应

Question

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

Navigation with hover effect

但是如果你调整浏览器大小，一切都搞砸了。到目前为止，我刚刚使用bootstrap来制作网站原型。但现在我正在尝试自己学习一些设计。

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

以下是代码：pen

Answer 1

这里典型的最佳做法是了解您的工具箱。您不必通过包含它来强制使用所有引导程序。但是，您可以通过简单地制作styles.css并使用navbar或navbar-fixed或您想要的任何类来合理地简单地覆盖默认样式，然后将自己的CSS放在styles.css中，并且您可以获得两个单词中最好的单词。

Answer 2

您应该对media queries进行一些研究，这样您就可以根据每种屏幕尺寸调整样式。之后，您可以在调整屏幕大小时设置不同的填充或边距（例如）。

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在调整浏览器大小时如何进行导航。希望这会有所帮助。