如何使用引导程序 4 折叠中型屏幕的导航栏内容答案

【问题标题】：How to collapse navbar content for medium size screen using bootstrap 4如何使用引导程序 4 折叠中型屏幕的导航栏内容
【发布时间】：2016-04-16 06:48:30
【问题描述】：

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

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

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

有问题的代码如下所示， _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>

【问题讨论】：

由于您想要汉堡菜单的三种不同状态，因此您需要 JavaScript 来完成此操作。如果只有两个，你可以使用checkbox hack。

标签： javascript css twitter-bootstrap media-queries

【解决方案1】：

只需给导航容器类navbar-expand-xl

【讨论】：

见“Explaining entirely code-based answers”。虽然这在技术上可能是正确的，但它并不能解释为什么它可以解决问题或应该是选择的答案。除了帮助解决问题，我们还应该进行教育。

【解决方案2】：

对_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">

【讨论】：