html - 手机 Rails 和 Bootstrap 的 NavBar 调整

Question

我想知道如何在移动设备上折叠导航栏的内容，以便它可以有一个主页链接，然后单击时三个破折号会下拉并显示所有其他链接。这是我的 _navigation.html.erb 文件:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav nav-pills">
        <li><%= link_to "Home", root_path %></li></a>
        <li><%= link_to "About Me", about_path, target: :_blank %></li>

        <li class="dropdown">
          <a href ="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="logo">Music<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a target="_blank" href="https://soundcloud.com/officialyungdremusic">Soundcloud</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href ="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="logo">Social Media<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a target="_blank" href="https://www.youtube.com/user/OfficialYungDreMusic">Youtube</a></li>
            <li><a target="_blank" href="https://twitter.com/yungdremusic">Twitter</a></li>
       </ul>
        <li><%= link_to "Pictures", pictures_path, target: :_blank %></li>
        <li><%= link_to "Contact Me", contact_path, target: :_blank%></li>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-->
</nav>

当我调整我的桌面窗口大小时，我试图完成的工作。但由于某种原因在手机上(720x1280 像素)它不会调整大小。我熟悉 css 中的媒体查询，我是否只需要另一个仅适用于 720 或更大屏幕的媒体查询？

非常感谢任何帮助!

Answer 1

bootstrap 导航栏的默认断点是 768px。我试图重现您的示例，但它确实在 768 像素以下崩溃了。但是，有些平板电脑的屏幕尺寸为 768px 或更大，它不会折叠。您必须编写自己的媒体查询或更改 @grid-float-breakpoint Bootstrap 变量的默认值。

检查 Changing the collapsed mobile navbar breakpoint在 Bootstrap 指南上了解更多信息。