如何解决Bootstrap导航栏面临的这3个问题:
- 当窗口缩小时,菜单无法正确折叠
- 在菜单链接旁边放置图标而不是下方
- 当窗口缩小时,让注册/登录按钮链接到另一个页面
https://jsfiddle.net/whywymam/zpdpsuLn/
HTML代码:<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<navbar>
<div class="upperRow">
<div class="navbar-header">
<a href="#" class="brand navbar-brand"> <img src="image/logo.png" class="img-responsive"></a>
</div>
<div id="btnTopInline">
<ul class="nav navbar-nav navbar-right imgicon hidden-xs">
<li>
<div class="indivColl">
<a href="signupLogin.php">
<img src="image/jobseekerlogo.png" class="indi">
<p class="indit">Job Seeker</p>
</a>
</div>
</li>
<li>
<div id="empColl">
<a href="signupLoginEmp.php">
<img src="image/employerlogo.png" class="emp">
<p class="empt">Employer</p>
</a>
</div>
</li>
</ul>
</div>
<!-- for tablet and mobile view-->
<button type="button" class="btn btn-login pull-right visible-xs">
<a href="signupLoginEmp.php">
Employer<br>Log In
</a>
</button>
<button type="button" class="btn btn-login pull-right visible-xs">
<a href="signupLogin.php">
Job Seeker<br>Log In
</a>
</button>
</div>
<div class="middleRow">
<div class="navbar-inner navbar-default navbar-static-top navcolor">
<div class="navbar-header ">
<!--button to appear when display is on mobile device-->
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".nav-collapse">
<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="nav-collapse collapse-in" id="nav-collapse">
<ul class="nav navbar-nav center-block">
<li><a href="home.php">Home<img src="image/home.png" width="75" height="65" alt="" title="" /></a></li>
<li><a href="about.php">About<img src="image/about.png" width="75" height="65" alt="" title="" /></a></li>
<li><a href="pyw.php">Prove Job<img src="image/PYW.png" width="75" height="65" alt="" title="" /></a></li>
<li><a href="#">Job<img src="image/jobs.png" width="75" height="65" alt="" title="" /></a></li>
<li><a href="rescources.php">Resources<img src="image/resource.png" width="75" height="65" alt="" title="" /></a></li>
</ul>
</div>
</div> <!-- end inner navbar -->
</div> <!-- end middle row -->
</navbar>
</div> <!-- end col-lg-12 col-md-12 col-sm-12 col-xs-12 -->
</div><!-- end container -->
CSS:
.img-responsive {
max-width: 60%;
margin-bottom: 15%;
padding-top: -3%;
}
.imgicon {
padding-left: 50%;
margin-top: -2%;
}
.middleRow{
padding-top: 10%;
margin-top: 5%;
}
.navcolor{
background-color: transparent;
}
.navbar-default {
margin-top: 3%;
}
.navbar-nav {
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
text-align: center;
}
#btnTopInline{
display: inline-block;
float: right;
clear: none;
}
@media(min-width:768px) {
.nav-collapse{
display: inline;
}
}
提前感谢您:)
(需要翻译的内容)