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

我的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'%>

最佳答案

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