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