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