2016-11-28 77 views
0

我想創建一個導航欄,其中包含兩個在Ruby on Rails中生成的鏈接。現在,幾乎試圖在左側創建品牌,並在右側登錄/註冊或註銷/發佈廣告。不過,我的右側導航欄正在落在一條新的路線上。就像導航欄的寬度不足以容納所有項目一樣。導航欄右下降品牌

這裏是我所描述的截圖....

enter image description here

右側導航欄是下降的品牌之下。

index.html.erb

<nav class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">SHIP LIST</a> 
    </div> 
    <ul class="nav navbar-nav navbar-right"> 
     <% if user_signed_in?%> 
     <li><a href="#"><%= link_to 'post ad', new_listing_path %></a></li> 
     <li><a href="#"><%= link_to 'log out', destroy_user_session_path, :method => :delete %></li> 
     <% else %> 
     <li><a href="#"><%= link_to 'sign up', new_user_registration_path %></li> 
     <li><a href="#"><%= link_to 'log in', new_user_session_path %></li> 
     <% end %> 
    </ul> 
    </div> 

我的CSS是如下,我也不得不做出與它的變化所以制定警報顯示導航欄下方,這樣可能會導致它。我不認爲這是。

body { 
    font-size: 62.5%; 
    font-family: Helvetica, sans-serif; 
    } 

.alert-box { 
    color:#555; 
    border-radius:10px; 
    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px; 
    padding:10px 10px 10px 36px; 
    margin:10px; 
    span { 
    font-weight:bold; 
    text-transform:uppercase; 
    } 
} 
.danger { 
    background:#ffecec url('images/error.png') no-repeat 10px 50%; 
    border:1px solid #f5aca6; 
} 
.success { 
    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%; 
    border:1px solid #a6ca8a; 
} 
.warning { 
    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%; 
    border:1px solid #f2c779; 
} 
.notice { 
    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%; 
    border:1px solid #8ed9f6; 
} 
+0

很難確定實際發生了什麼,沒有一個工作的例子,但嘗試把ul.nav navbar-nav導航欄 - 右div.navbar-header裏面 – macksol

+0

沒有工作不幸,我會盡力把它撕成正義就像一個靜態的準系統HTML/CSS沒有Rails的東西,看看這是否是某種原因。 – Carson

回答

0

隨着有關正確導航欄下面的代碼...

<ul class="nav navbar-nav navbar-right"> 
    <% if user_signed_in?%> 
    <li><a href="#"><%= link_to 'post ad', new_listing_path %></a></li> 
    <li><a href="#"><%= link_to 'log out', destroy_user_session_path, :method => :delete %></li> 
    <% else %> 
    <li><a href="#"><%= link_to 'sign up', new_user_registration_path %></li> 
    <li><a href="#"><%= link_to 'log in', new_user_session_path %></li> 
    <% end %> 
</ul> 

刪除,像這樣的鏈接標籤...

<ul class="nav navbar-nav navbar-right"> 
    <% if user_signed_in?%> 
    <li><%= link_to 'post ad', new_listing_path %></a></li> 
    <li><%= link_to 'log out', destroy_user_session_path, :method => :delete %></li> 
    <% else %> 
    <li><%= link_to 'sign up', new_user_registration_path %></li> 
    <li><%= link_to 'log in', new_user_session_path %></li> 
    <% end %> 
</ul> 

Rails會自動生成它們,所以你不需要像手動那樣添加它們。由於它試圖添加四個鏈接而不是兩個鏈接,所以它正在泛濫。與HTML頁面主體中生成的Devise gem無關。