ブーツラップnavbarとレールのボタンのアプリケーション

Question

私は私のレールアプリに組み込まれているブーストラップnavbarを持っています。

• 私のロゴと右に「新しいポスト」ボタン
• 左へのリンク：それはで作られています。

まず、ここに私のコードです：ここでは

<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 - 私は「新しいポスト」の横の私のボタンにいくつかの素晴らしいアイコンをしたいが、私はクラスがレールのコードに含まれているので、ボタンwhithinブートストラップglyphicon glyphicon-plusを追加する方法を見つけ出すことはできません：秒<%= button_to "New Post", "#", class: 'btn btn-primary navbar-btn'%>

Answer 1

.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") %> 

を提案したり、フォント素晴らしいアイコンを追加することができますよう、あなたが追加することができます。彼らはもっときれいです。そしてそれは本当に簡単に追加できます。あなたの頭のタグにこれを追加 -

<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 %> 

Answer 2

問題の一部は、content_tag

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