导航栏中的自举间距

Question

我在bootstrap中创建了一个导航栏，我想在Upload Image和Search box之间添加一些间距。我在rails 4.2.5项目中使用bootstrap 4 alpha。

目前我的导航栏如下所示，

导航栏的部分如下所示，

_nav.html.erb

<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="http://example.io">example.io</a>
  <ul class="nav navbar-nav">
    <!-- <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li> -->

    <% if user_signed_in? %>
    <li><%= link_to current_user.email, edit_user_registration_path %></li>
    <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
    <% else %>
    <li class="nav-item">
    <a class="nav-link"<%= link_to "Sign Up", new_user_registration_path%>
    </li>
    <li class="nav-item">
    <a class="nav-link"<%= link_to "Login", new_user_session_path%>
    </li>
    <% end %>


    <li class="nav-item">
      <a class="nav-link" href="#">Gallery</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Uplodad Image</a>
    </li>
  </ul>

  <form class="input-group">
    <input class="form-control" type="text" placeholder="Search for...">
    <span class="input-group-btn">
    <button class="btn btn-success-outline" type="submit">
      <i class="fa fa-search"></i>
    </button>
    </span>
  </form>
</nav>

Answer 1

我通过将input-group封装在form-inline pull-xs-right中来提出了一个有效的解决方案。