0
我想创建一个2行的导航栏,但下面的行应该只有2或3列宽,其中我将显示登录用户用户名。问题是我很难过,我尝试了各种方法无济于事。导航栏仍然需要时,可以有更小的屏幕上的汉堡包按钮,下面是它是如何应该看起来像:Bootstrap - 导航栏有2行,但第二行只有2列宽
+--------------------------------------------------------------------------------+
| <small logo> | link | link | link | link | link | link | link | |
+--------------------------------------------------------------------------------+
| username |
+----------+
这里就是我有这么远:
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
%{--<img src="http://placehold.it/70x70" class="span1" style="position:relative;top:10px" />--}%
%{--<g:img dir="images" file="oyg_logo.png" id="logo" style="position:relative;top:10px" />--}%
<div class="span12">
<div class="row">
<div class="span2 offset1" %{--style="text-align:right"--}%>
<div class="navbar-text">
<g:img dir="images" file="oyg_logo.png" id="logo" style="position:relative;top:10px" />
</div>
</div>
<div class="span9" %{--style="text-align:right"--}%>
<div class="navbar-text">
<ul class="nav">
<li><g:link controller="home" action="index">Home</g:link></li>
<li><g:link controller="home" action="resorts">Resorts</g:link></li>
<li><g:link controller="contact" action="contact">Contact Us</g:link></li>
<li><g:link controller="home" action="terms">Terms</g:link></li>
<sec:ifNotLoggedIn>
<li><g:link controller="home" action="howRegister">How to Register</g:link></li>
<li><g:link controller="register" action="register">Register</g:link></li>
<li><g:link controller="login" action="auth">Sign In</g:link></li>
</sec:ifNotLoggedIn>
<sec:ifLoggedIn>
<li><g:link controller="search" action="search">Search Availability</g:link></li>
<li><g:link controller="Bookings" action="bookings">Bookings</g:link></li>
<li><g:link controller="logout" action="index">Logout</g:link></li>
</sec:ifLoggedIn>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="span2 offset9">
<ul class="nav pull-right">
<sec:ifLoggedIn>
<li class="username_label" ><g:fullName/></li>
</sec:ifLoggedIn>
<sec:ifNotLoggedIn>
<li class="username_label" >Please log in</li>
</sec:ifNotLoggedIn>
</ul>
</div>
</div>
</div>
</div>
</div>
它只是看起来像一个非常厚的导航栏,恰好有两排链接。任何帮助,将不胜感激。谢谢!
请告诉我你的代码这么远? – Andrew
我会编辑它 – PrintlnParams