我在桌面上查看时,目前有一个侧边栏作为导航栏 . 在桌面上,视图,图标和文本与左侧的图标和右侧的文本并排 .
我试图得到它,以便当它折叠到移动视图时,侧边栏会折叠到固定在屏幕底部的导航栏 . 图标位于顶部,位于文本下方 .
这是我目前所拥有的:http://codepen.io/anon/pen/bpRgEJ
这是我试图找到底部位置的代码:
@media (max-width:35em) {
.main-nav {
background: #ECC264;
border-right: 1px solid #e5e5e5;
position: fixed;
margin: 0;
left: 0;
bottom: 0;
height: 5em;
width: 100%;
}
}
它目前折叠成一个顶部导航栏,图标和文字是并排的,而不是顶部和底部 .
任何帮助将不胜感激,谢谢!
3 回答
首先,我建议您按照以下方式组织CSS:
1.-具有影响一切的规则的一般选择者和分支
2.-仅影响特定宽度行为的媒体查询 .
因此,如果您需要一个始终固定的导航栏,但桌面位于屏幕左侧,而移动设备位于页面底部,您应该编写如下内容:
这样,您将避免处理不匹配的规则 .
您的完整CSS应如下所示:
您的示例在Codepen中分叉:http://codepen.io/xWaZzo/pen/BKZpQE
这应该可以解决问题 .
http://jsfiddle.net/DTcHh/1819/
你应该删除top:0
还可以在媒体查询类中增加高度
希望这是你想要的?