Bootstrap導航欄和Rails應用程序中的按鈕

Question

我的rails應用程序中集成了boostrap 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-我想在按鈕“ New Post”旁邊添加一個漂亮的圖標，但是由於該類包含在rails代碼中，因此我無法弄清楚如何在按鈕中添加引導glyphicon glyphicon-plus ： <%= button_to "New Post", "#", class: 'btn btn-primary navbar-btn'%>

Answer 1

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

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

Answer 2

.navbar-fixed-top為默認樣式添加了一些樣式。 這使得它占據了整個寬度。 如果您希望它受.container限制， .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 %>