menu XUJINKAI 的个人主页
create settings
home
主页
list
全部博文
bookmark
个人Wiki
open_in_new
  • Page
  • assistant_photo
    个人项目
    tag_faces
    捐赠
    person
    关于

    让navbar对移动端更友好

    Tags: 前端

    利用bootstrap可以轻松让导航条固定在顶部,并且在移动端上折叠。
    但是在移动端上固定的导航条会遮挡视野,默认的下拉菜单也不够美观。

    从这里http://note.rpsh.net/学来一招,让移动端中的导航条不再固定,并且折叠菜单更美观,不再占用大半个屏幕。

    .navbar {
    	position: fixed;
    	width: 100%;
    	height: 20px;
    	z-index: 20;
    	border-radius: 0;
    	background-color: rgba(0, 0, 0, 0.87);
    	border-color: rgba(255, 255, 255, 0);
    }
    
    @media (max-width: 768px) {
    	.navbar {
    		position: static;
    	}
    	div .navbar-collapse {
    	    position: absolute;
    	    background-color: rgba(0, 0, 0, 0.90);
    	    z-index: 20;
    		width: 170px;
    	    right: 30px;
    	}
    	.content {
    		padding-top: 0px;
    	}
    }
    
    @media (min-width: 769px) {
    	.content {
    		padding-top: 60px;
    	}
    }
    

    其中.content是正文所属的class。

    具体效果改变本站窗口大小就能看到。


    Disqus评论加载中。。。