bootstrap導航欄和按鈕導軌應用程序

我有一個boostrap導航欄集成在我的導軌應用程序。它是由：bootstrap導航欄和按鈕導軌應用程序

我的標誌和一些鏈接到左邊
「新職位」按鈕向右。

首先，這裏是我的代碼：

<div class="container"> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <div class="pull-left" id="navbar-logo"> 
      <%= image_tag 'physics.png', width: "32", alt: 'logo' %> 
      </div> 
      <a class="navbar-brand">Podcasts</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul id="navbar" class='nav navbar-nav'> 
      <li class="<%= 'active' if current_page?(home_path) %>"> 
       <%= link_to 'Home', home_path %></li> 
      <li><%= link_to 'Archives', '#' %></li> 
      <li class="<%= 'active' if current_page?(about_path) %>"> 
       <%= link_to 'About', about_path %></li> 
      <li class="<%= 'active' if current_page?(contact_path) %>"> 
       <%= link_to 'Contact', contact_path %></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <div class="btn-group"> 
       <%= button_to "New Post", "#", class: 'btn btn-primary navbar-btn'%> 
      </div> 
      </ul> 
     </div> 
    </nav> 
</div>

這裏是我的問題：

1 - 我注意到，即使<nav class="navbar navbar-default navbar-fixed-top">嵌套在<div class="container">，它需要的整個寬度我屏幕。但是，當我用<nav class="navbar navbar-default">替換它時，它以容器標準寬度爲界。發生了什麼，我怎樣才能使這個navbar-fixed-top以容器爲界？

2 - 我想我旁邊的按鈕，「新話題」一些漂亮的圖標，但我想不出如何添加引導glyphicon glyphicon-plus whithin按鈕，因爲類包含在Rails代碼：<%= button_to "New Post", "#", class: 'btn btn-primary navbar-btn'%>

來源

2016-05-10 sweeeeeet

的.navbar-fixed-top增加了一些樣式默認。這使得它佔據了整個寬度。如果你想要它受到.container限制，你需要將這個樣式添加到.navbar-fixed-top類。

.navar-fixed-top{ 
    right: auto; 
    left: auto; 
    //You have to add border-radius of 3px if you want smooth edges. 
}

其次，你可以添加@codeVishal建議

<%= content_tag(:span, "", :class => "glyphicon glyphicon-plus") %>

，或者你可以添加字體真棒圖標。他們很整潔。它的添加非常簡單。添加到您的head標籤 -

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">

和

<%= button_to "#", class: 'btn btn-primary navbar-btn' do %> 
    <i class="fa fa-plus-circle"></i>&nbsp;New Post 
<% end %>

來源

2016-05-10 07:24:10 Kumar

對於第二問題的部分使用content_tag

<%= button_to "#", class: 'btn btn-primary navbar-btn' do %> 
    New Post 
    <%= content_tag(:span, "", :class => "glyphicon glyphicon-plus") %> 
<% end %>

來源

2016-05-10 06:41:16 coderVishal

bootstrap導航欄和按鈕導軌應用程序

回答

相關問題