Bootstrap导航栏和Rails应用程序中的按钮

Question

I have a boostrap navbar integrated in my rails app. It is made of:

• my logo and some links to the left
• a "New post" button to the right.

First, here is my code:

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

Here are my questions:

1- I noticed that, even if <nav class="navbar navbar-default navbar-fixed-top"> is nested in <div class="container"> , it takes the whole width of my screen. But when I replace it by <nav class="navbar navbar-default"> , it is bounded by the container standard width. What's happening and how can I made this navbar-fixed-top bounded by the container?

2- I want some nice icon next to my button "New Post" but I cannot figure how to add the bootstrap glyphicon glyphicon-plus whithin the button since the class is contained in the rails code : <%= button_to "New Post", "#", class: 'btn btn-primary navbar-btn'%>

Answer 1

For the second part of the question use content_tag

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

Answer 2

The .navbar-fixed-top adds a few styles to the default. And that makes it take the full width. If you want it bounded by .container you need to add this styles to .navbar-fixed-top class.

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

Second, you can add as @codeVishal suggested

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

or you can add font-awesome icons. They are much neater. And its really simple to add. Add this to your head tag -

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

and

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