Twitter Bootstrap 3 修复了水平模式下的导航栏崩溃答案

【问题标题】：Twitter Bootstrap 3 fixed navbar collapse in horizontal modeTwitter Bootstrap 3 修复了水平模式下的导航栏崩溃
【发布时间】：2014-12-02 16:58:22
【问题描述】：

更新：所以，我完全误诊了这个问题。看起来折叠工作正常，因为它应该在设置为 @screen-sm-min 的 @grid-float-breakpoint 上折叠，但由于某种原因，导航栏现在默认在水平模式下折叠。这是我现在正在调试的。

导航栏折叠在大多数分辨率下都能正常工作。它在超小型设备上崩溃得很好，并在中型和大型设备上按预期显示。但不适用于 iPad (1024×768) 等小分辨率，栏会折叠但图标不显示！！！

这是我的代码：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand"><img src='assets/logo.png'/></a>
  </div>
    <div class="navbar-inverse-collapse collapse">
      <ul class="nav navbar-nav">
        <li><%= link_to("Games", games_path) unless current_page?(games_path) %></li>
      </ul>
      <form class="navbar-form navbar-right global-search">
          <input type="text" id="global-search" class="form-control col-lg-8" placeholder="Instant search">
      </form>
    </div><!--/.nav-collapse -->
</div>

知道为什么会这样吗？在 Ruby on Rails 4.1 应用程序上使用 tbs 3.2.0

【问题讨论】：

超小型设备（手机，小于 768 像素）。小型设备（平板电脑，768px 及以上）。中型设备（台式机，992 像素及以上）。大型设备（大型桌面，1200 像素及以上）。来源：getbootstrap.com/css
下一次，在你“Sheesh”之前谷歌。更好的是，如果您有无用的评论，请自己保留。谢：D
今天的课程是关于平板电脑的。它们有 2 个方向。一种纵向模式，其中最小尺寸成为视图的宽度。在 iPad 的情况下，768 属于小型设备（平板电脑，768 像素及以上）。你收到了吗？或者您是否需要一个 youtube 视频来教您如何以 2 个不同的方向握持平板电脑？
好。我没有时间浪费在向你解释显而易见的事情上。

标签： jquery html css twitter-bootstrap ruby-on-rails-4

【解决方案1】：

当导航栏折叠时，图标被“移除”。相反，如果您更改该特定图标，它将显示 3 行（默认折叠的导航栏图标），而不是行

【讨论】：

不，它不是这样工作的。如果栏是可折叠的，则图标将始终显示。单击该图标将显示或隐藏折叠的内容。这就是它现在在超小型设备上的工作方式。尝试在此处调整窗口大小以查看功能：bootswatch.com/default

【解决方案2】：

所以，我发现了我的问题。折叠区域中没有“navbar-collapse”类，这是折叠正常运行所必需的。所以而不是：

<div class="navbar-inverse-collapse collapse">

应该是：

<div class="navbar-inverse-collapse navbar-collapse collapse">

【讨论】：

navbar-inverse-collapse 可能是您编写的一些自定义类，因为它不是 Bootstrap 的一部分。
是的，我在同一页面中有多个导航栏。因此，您需要为每个类设置一个唯一的类，以便分别切换它们。否则，单击折叠图标将折叠所有导航栏。为了澄清起见，我应该使用 id 代替。