【发布时间】：2016-03-30 20:32:16
【问题描述】：
我将它作为我的导航栏，我希望它能够在移动设备上响应，以便在小屏幕上它成为一个下拉菜单。像这样。
菜单
首页
+PORFOLIO
-婚礼
-爱
关于
+博客
-故事
-存档
联系方式
任何帮助都会很棒，因为我没有运气自己解决这个问题......
img{
display: block;
margin-left: auto;
margin-right: auto;
}
/*navbar*/
#wrap{
text-align: center;
font-family: "Lora" serif;
font-size: 13px;
font-weight: normal;
padding-right: 48px;
padding-bottom: 30px;
padding-top: 50px;
}
.navbar li a{
display: block;
}
.navbar li{
display: inline-block;
list-style: none;
text-align: left;
}
.navbar a{
text-decoration: none;
color: #9c9c9c;
display: block;
padding: 8px;
background-color: white;
}
.navbar li ul{
position: absolute;
display: none;
margin: 0;
padding: 0;
height: auto;
}
.navbar li:hover, a:hover{
color: black;
}
.navbar li:hover ul{
display: block;
}
.navbar li ul li{
display: block;
}
p{
font-size: 13px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding-bottom: 30px;
padding-top: 30px;
font-family: "Lora" serif;
color: black;
font-weight: 200;
text-decoration: none;
}
footer{
text-align: center;
font-family: "Lora" serif;
font-size: 10px;
font-weight: normal;
padding-bottom: 30px;
padding-top: 30px;
}<!DOCTYPE html>
<html>
<head>
<title>Instagram</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Instagram.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
a p:hover{
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
</div>
<div class="clearfix visible-xs-block"></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div id="wrap">
<ul class="navbar">
<li><a href="index.html">HOME</a></li>
<li><a href="">PORTFOLIO</a>
<ul>
<li><a href="wedding.html">WEDDING</a></li>
<li><a href="Love.html">LOVE</a></li>
</ul>
</li>
<li><a href="#">ABOUT</a>
<ul>
<li><a href="AboutUs.html">US</a></li>
</ul>
</li>
<li><a href="#">BLOG</a>
<ul>
<li><a href="NewBlogPage3.html">STORIES</a></li>
<li><a href="Archive.html">ARCHIVE</a></li>
</ul>
</li>
<li><a href="Contact.html">CONTACT</a></li>
</ul>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="col-xs-12 col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
<div class="clearfix visible-xs-block"></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html> 【问题讨论】：
-
我已经尝试过 bootstrap 但无法弄清楚@n1c9
标签： php html css twitter-bootstrap responsive-design