制作导航菜单响应

这是我大学毕业后第一次做任何CSS。我已成功地写笔：制作导航菜单响应

Navigation with hover effect

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

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

下面是代码：pen

来源

2014-01-29 Deepankar Bajpeyi

你必须使用CSS媒体查询，看看我的一个响应式导航项目[这里]（http://jsfiddle.net/mdesdev/Wqq6g/），你可以学到一些东西;） – mdesdev

不客气; ） – mdesdev

要解决该问题，即它打破了，你需要添加到您的类

.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如何做他的导航。希望这可以帮助。

来源

2014-01-29 17:23:58 Cam

它确实没有人。非常感谢该片段。我现在可以从这里开始。 :) –

没问题。克里斯Coyier有大量有用的媒体查询教程，可以帮助吨。如果您有任何问题，请告诉我！ – Cam

当然。我会 –

这里典型的最好的做法是要知道你的工具箱。你不会被迫通过包含它来利用所有的引导程序。但是，只需简单地制作一个styles.css文件，然后使用导航栏或导航栏固定或任何您想要的类，然后将自己的CSS放入styles.css中即可获得最好的两个单词，从而可以合理简单地覆盖默认样式。

来源

2014-01-29 17:15:40 yburyug

你应该做一些关于media queries的研究，它可以让你调整你的风格，适合每种屏幕尺寸。之后，您可以在屏幕调整大小时设置不同的填充或边距（例如）。

来源

2014-01-29 17:19:58 Ka0ru

制作导航菜单响应

回答

相关问题