如何使用 bootstrap 4 折叠中型屏幕的导航栏内容

Question

我使用 bootstrap 4 alpha 创建了一个导航栏，并希望在中等尺寸屏幕上查看网站/页面时使用 ☰（汉堡菜单）隐藏导航栏的内容。

截至目前，当我使用中型浏览器加载页面时，☰（汉堡菜单）和导航栏内容都会显示 window。

理想情况下，我想在页面加载时隐藏导航栏列表项，只显示汉堡菜单，然后在单击汉堡菜单后显示列表项。如果再次点击，我想隐藏项目。

有问题的代码如下所示， _nav.html.erb

<nav class="navbar navbar-full navbar-light bg-faded">
  <button class="navbar-toggler hidden-md-down" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰
  </button>
  <div class="collapse navbar-toggleable-md" id="nav-content">
  <a class="navbar-brand" href="http://example.io">example.io</a>
  <ul class="nav navbar-nav">

<% if user_signed_in? %>

    <li class="nav-item"><a class="nav-link"<%= link_to current_user.email, edit_user_registration_path %></li>
    <li class="nav-item"><a class="nav-link"<%= 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"<%= link_to "About", about_path %></a>
    </li>

    <li class="nav-item">
      <a class="nav-link"<%= link_to "Contact", contact_path %></a>
    </li>

    <li class="nav-item">
      <a class="nav-link" href="#"><i class="fa fa-upload"></i> Uplodad Image</a>
    </li>

  </ul>
  <div class="form-inline pull-xs-right">
  <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>
</div>
</div>
</nav>

Answer 1

对 _nav.html.erb 的以下更改解决了我的问题。

<nav class="navbar navbar-full navbar-light bg-faded">
  <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰ example.io
  </button>
  <div class="collapse navbar-toggleable-md" id="nav-content">
  <a class="navbar-brand" href="http://example.io">example.io</a>
  <ul class="nav navbar-nav">

Answer 2

只需将 class navbar-expand-xl 给导航容器

如何使用 bootstrap 4 折叠中型屏幕的导航栏内容

How to collapse navbar content for medium size screen using bootstrap 4

javascript

css

media-queries

twitter-bootstrap