利用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。

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