Php 如何使导航栏对下拉菜单做出响应
我有这个作为我的导航栏，我希望它能在移动设备上响应，以便在小屏幕上成为一个下拉菜单。像这样的 菜单Php 如何使导航栏对下拉菜单做出响应,php,html,css,twitter-bootstrap,responsive-design,Php,Html,Css,Twitter Bootstrap,Responsive Design,我有这个作为我的导航栏，我希望它能在移动设备上响应，以便在小屏幕上成为一个下拉菜单。像这样的 菜单 主页 +PORFOLIO -婚礼 -爱 关于 +博客 -故事 -存档 接触 任何帮助都将是伟大的，因为我没有运气独自解决这个问题 img{ 显示：块； 左边距：自动； 右边距：自动； } /*导航栏*/ #包裹{ 文本对齐：居中； 字体系列：“Lora”衬线； 字体大小：13px； 字体大小：正常； 右边填充：48px； 填充底部：30px； 填充顶部：50px； } 李娜先生{ 显示：块； }
主页
+PORFOLIO
-婚礼 -爱
关于
+博客
-故事
-存档
接触 任何帮助都将是伟大的，因为我没有运气独自解决这个问题
img{
显示：块；
左边距：自动；
右边距：自动；
}
/*导航栏*/
#包裹{
文本对齐：居中；
字体系列：“Lora”衬线；
字体大小：13px；
字体大小：正常；
右边填充：48px；
填充底部：30px；
填充顶部：50px；
}
李娜先生{
显示：块；
}
李国宝先生{
显示：内联块；
列表样式：无；
文本对齐：左对齐；
}
纳瓦尔先生{
文字装饰：无；
颜色：#9c9c9c；
显示：块；
填充：8px；
背景色：白色；
}
navbar li ul先生{
位置：绝对位置；
显示：无；
保证金：0；
填充：0；
高度：自动；
}
.navbar li:悬停，a:悬停{
颜色：黑色；
}
.navbar li:悬停ul{
显示：块；
}
李国宝先生{
显示：块；
}
p{
字体大小：13px；
文本对齐：居中；
左边距：自动；
右边距：自动；
填充底部：30px；
填充顶部：30px；
字体系列：“Lora”衬线；
颜色：黑色；
字号：200；
文字装饰：无；
}
页脚{
文本对齐：居中；
字体系列：“Lora”衬线；
字体大小：10px；
字体大小：正常；
填充底部：30px；
填充顶部：30px；
}
一款图片分享应用
a:悬停{
文字装饰：无；
}
所有图像版权所有©Seaward Photography 2016。总部设在加利福尼亚州圣地亚哥。适用于世界各地的目的地。
我试着让它为你工作。我已经删除了您自己的导航栏和css，并添加了Bootstrap3响应导航栏。在一个自定义css中，我在引导的导航栏中加入了您自己的样式和一些调整。在html文件中，我还添加了带有CDN的引导css&js和Jquery
HTML
我尝试过引导，但在@n1c9无法找到它
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap 3 - Hamburger menu</title>
<!-- Bootstrap Core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet">
<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">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html">HOME</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PORTFOLIO<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Wedding.html">WEDDING</a></li>
<li><a href="Love.html">LOVE</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="AboutUs.html">US</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">BLOG<span class="caret"></span></a>
<ul class="dropdown-menu">
<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><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</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>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.js"></script>
<script>
</script>
</body>
</html>
img{
display: block;
margin-left: auto;
margin-right: auto;
}
#wrap{
font-family: "Lora" serif;
font-size: 13px;
font-weight: normal;
padding-right: 48px;
padding-bottom: 30px;
padding-top: 50px;
}
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;
}
/* BOOTSTRAP TWEAKS */
.navbar-default {
background: none;
border: none;
}
.navbar-default .navbar-nav li a {
color: #9c9c9c;
}
.caret {
border-top-color: #9c9c9c;
border-bottom-color: #9c9c9c;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: black;
text-decoration: underline #9c9c9c;
background: none;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #555555;
background: none;
}
.dropdown-menu {
list-style: none;
background: none;
border: none;
-webkit-box-shadow:none;
box-shadow: none;
}