Bootstrap 新手求助，自适应导航栏，当小屏幕时那个汉堡按钮无法显示出来，谢谢！

2015-07-30 17:23:51 +08:00
 1dian01

html文件

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>GhostChina</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="app.css" rel="stylesheet">
</head>
<body>
<!--start header-->
<header class="main-header" style="background-image: url(http://static.ghostchina.com/image/6/d1/fcb3879e14429d75833a461572e64.jpg)">
<div class="container" >
<div class="row">
<div class="clo-sm-12">
<!--start logo-->
<a class="branding" href="http://www.nfchome.org" title="gohost china">
<img src="http://static.ghostchina.com/image/b/46/4f5566c1f7bc28b3f7ac1fada8abe.png" alt="ghsot">
</a>
<!--end logo-->
</div>
</div>
</div>
</header>
<!--end header-->

<!-- start navigation -->
<nav class="main-navigation">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="menu">
<li class="nav-current" role="presentation"><a href="#">首页</a></li>
<li role="presentation"><a href="#">论坛</a></li>
<li role="presentation"><a href="#">快捷手册</a></li>
<li role="presentation"><a href="#">中文文档</a></li>
<li role="presentation"><a href="#">下载</a></li>
<li role="presentation"><a href="#">关于</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!-- end navigation -->

<script src="jquery-2.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>

css文件

/公共通用属性/
html,body{
color: #505050;
line-height: 1.75em;
background: #ebebeb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/头部属性/
.main-header{
text-align: center;
padding: 90px 0;
}

/logo/
.main-header .branding{
font-size: 3.5em;
color: #303030;
}

/a链接默认属性/
a {
color: #e67e22;
outline: none;
text-decoration: none;
}

/不想图片自适应拉伸的话就是max-width:100%,想图片都统一拉升的话就用width:100%/
.main-header .branding img{
max-width: 100%;
}

a:active,a:focus,a img{
outline: none;
}

.main-navigation{
text-align: center;
background: #ffffff;
border-top: 1px solid #ebebeb;
border-bottom: 3px solid #e1e1e1;
margin-bottom: 35px;
}

.main-navigation .menu{
padding: 0;
margin: 0;
}

.main-navigation .menu li.nav-current{
border-bottom: 3px solid #e67e22;
margin-bottom: -2px;
}

.main-navigation .menu li{
list-style: none;
display: inline-block;
position: relative;
}

.main-navigation .menu li a{
color: #505050;
line-height: 4em;
display: block;
padding: 0 21px;
}

.main-navigation button .icon-bar {
color:#059808;
text-align: center;
}

3715 次点击
所在节点    问与答
3 条回复
wildplant
2015-07-31 00:15:50 +08:00
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GhostChina</title>
<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
/*css文件*/
/*公共通用属性*/
html, body {
color: #505050;
line-height: 1.75em;
background: #ebebeb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*/头部属性/*/
.main-header {
text-align: center;
padding: 90px 0;
}

/*/logo/*/
.main-header .branding {
font-size: 3.5em;
color: #303030;
}

/*/a链接默认属性/*/
a {
color: #e67e22;
outline: none;
text-decoration: none;
}


.main-header .branding img {
max-width: 100%;
}

a:active, a:focus, a img {
outline: none;
}

.main-navigation {
text-align: center;
background: #ffffff;
border-top: 1px solid #ebebeb;
border-bottom: 3px solid #e1e1e1;
margin-bottom: 35px;
}

.main-navigation .menu {
padding: 0;
margin: 0;
}

.main-navigation .menu li.nav-current {
border-bottom: 3px solid #e67e22;
margin-bottom: -2px;
}

.main-navigation .menu li {
list-style: none;
display: inline-block;
position: relative;
}

.main-navigation .menu li a {
color: #505050;
line-height: 4em;
display: block;
padding: 0 21px;
}

.main-navigation button .icon-bar {
color: #059808;
text-align: center;
}
</style>

</head>
<body>
<!--start header-->
<header class="main-header"
style="background-image: url(http://static.ghostchina.com/image/6/d1/fcb3879e14429d75833a461572e64.jpg)">
<div class="container">
<div class="row">
<div>
<!--start logo-->
<a class="branding" href="http://www.nfchome.org" title="gohost china">
<img src="http://static.ghostchina.com/image/b/46/4f5566c1f7bc28b3f7ac1fada8abe.png" alt="ghsot">
</a>
<!--end logo-->
</div>
</div>
</div>
</header>
<!--end header-->

<!-- start navigation -->

<nav class="navbar navbar-default main-navigation">

<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">写点啥</a>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li class="nav-current" role="presentation"><a href="#">首页</a></li>
<li role="presentation"><a href="#">论坛</a></li>
<li role="presentation"><a href="#">快捷手册</a></li>
<li role="presentation"><a href="#">中文文档</a></li>
<li role="presentation"><a href="#">下载</a></li>
<li role="presentation"><a href="#">关于</a></li>
</ul>
</div>
</nav>
<!-- end navigation -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
wildplant
2015-07-31 00:16:57 +08:00
其实直接从 http://v3.bootcss.com/components/#navbar 拷贝代码再改样式就挺好。
1dian01
2015-07-31 09:15:59 +08:00
感谢！
@wildplant

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/209616

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX