我下载并编辑了一个网页。该页面有一个使用（<ul class="nav nav-justified">）代码的导航栏。当浏览器窗口小于768px时，菜单项会在另一个下面列出，这会导致视图非常糟糕。
是否可以在小屏幕上制作折叠导航栏并同时在较大屏幕上对齐导航栏？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form - Simplex</title>
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/justified.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="container" class="container">
<a href="#"><img src="images/templatemo_header.jpg" alt="Simplex Responsive Template" class="img-responsive" /></a>
<ul class="nav nav-justified">
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="about.html">About Us</a></li>
<li class="active"><a href="contact.html">Contact</a></li>
</ul>
<div class="row space30"> <!-- row 1 begins -->
<div class="col-md-6">
<h2>Etiam in tortor ac augue varius</h2>
<p>Donec pharetra augue at hendrerit dignissim. Vivamus ultrices, justo non malesuada dignissim, lectus sapien pellentesque velit, sit amet gravida dui turpis ac sem. Vestibulum eget dui ipsum. Quisque tincidunt turpis eleifend, facilisis quam vitae, rhoncus nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at erat vitae lacus bibendum malesuada quis quis neque. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow">CSS</a>.</p>
<p>Phasellus molestie porttitor dolor nec rhoncus. Mauris purus tellus, gravida blandit placerat sed, ullamcorper ac eros. Proin posuere, quam quis lobortis auctor, magna sem congue metus, eu auctor nibh velit id quam.</p>
<h3>Office One</h3>
<p>120-240 Ut quis faucibus augue,<br>
In ac lectus mollis, ornare ipsum,<br>
lacinia velit, 10660</p>
<h3>Office Two</h3>
<p>36-101 Integer accumsan,<br>
diam sit amet aliquam aliquam,<br>
est dui iaculis diam, 10220.</p>
</div>
<div class="col-md-6">
<h2>Contact Us</h2>
<p>You may send us a message below.</p>
<form role="form">
<div class="form-group">
<label for="name">Name:</label>
<input name="name" type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input name="email" type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="subject">Subject:</label>
<input name="subject" type="text" class="form-control" id="subject" placeholder="Enter your subject">
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea name="message" rows="5" class="form-control" id="message" placeholder="Enter your message"></textarea>
</div>
<div class="checkbox">
<label>
<input name="newclient" type="checkbox" id="newclient" value="new"> I am new client.
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div> <!-- /row 1 -->
<!-- Site footer -->
<div class="footer">
<p>Copyright © 2072 Company Name</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
justified.css文件
/*
Simplex Template
http://www.templatemo.com/preview/templatemo_382_simplex
*/
body {
}
a:hover { color: #090; }
.space30 { margin-top: 30px; }
.row ul { padding-left: 30px; }
.clear { clear: both; }
.float_left { float: left; }
.float_right { float: right; }
.img_left_gallery { float: left; margin: 12px; padding: 8px; border: 1px solid #CCC; }
.img_left { float: left; margin-right: 20px; margin-bottom: 15px; }
.img_right { float: right; margin: 0px 0px 15px 20px; }
.img_bottom { margin-bottom: 15px; }
.footer {
border-top: 1px solid #eee;
margin-top: 40px;
padding-top: 20px;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
background-color: transparent;
height: 0px;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified {
background-color: #006699;
border-radius: 6px;
border: 1px solid #006699;
}
.nav-justified > li > a {
padding-top: 15px;
padding-bottom: 15px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #005588;
background-color: #006699; /* Old browsers */
background-repeat: repeat-x; /* Repeat the gradient */
background-image: -moz-linear-gradient(top, #0099FF 0%, #006699 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0099FF), color-stop(100%,#006699)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #0099FF 0%,#006699 100%); /* Chrome 10+,Safari 5.1+ */
background-image: -ms-linear-gradient(top, #0099FF 0%,#006699 100%); /* IE10+ */
background-image: -o-linear-gradient(top, #0099FF 0%,#006699 100%); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099FF', endColorstr='#006699',GradientType=0 ); /* IE6-9 */
background-image: linear-gradient(top, #0099FF 0%,#006699 100%); /* W3C */
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
color: #000000;
background-color: #22BBFF;
background-image: none;
box-shadow: inset 0 3px 7px rgba(0,0,0,.25);
}
.nav-justified > li > a:hover {
color: black;
background-color: #22BBFF;
background-image: none;
box-shadow: inset 0 3px 7px rgba(0,0,0,.25);
}
.nav-justified > li:first-child > a {
border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
border-bottom: 0;
border-radius: 0 0 5px 5px;
}
@media (min-width: 768px) {
.nav-justified {
max-height: 52px;
}
.nav-justified > li > a {
border-left: 1px solid #0099FF;
border-right: 1px solid #005588;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 5px 0 0 5px;
}
.nav-justified > li:last-child > a {
border-radius: 0 5px 5px 0;
border-right: 0;
}
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.masthead,
.marketing,
.footer {
padding-left: 0;
padding-right: 0;
}
}
答案 0 :(得分：0)
首先，您只需要添加一个菜单图标，用于屏幕分辨率小于768px，并编写一小段jquery来切换或折叠其点击的导航栏。请参阅下面的示例你的答案：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
#togglebutton{display:none;}
@media screen and (max-width="786"){
#togglemenu{display:none;}
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#togglebutton").click(function(){
jQuery("#togglemenu").slideToggle("slow");
});
});
</script>
</head>
<body>
<div id="togglebutton"><img src="menu_icon.png"></div>
<ul id="togglemenu" class="nav nav-justified">
<li>Test li</li>
<li>Test li</li>
<li>Test li</li>
<li>Test li</li>
</ul>
</body>
</html>