手机 Rails 和 Bootstrap 的导航栏调整答案

【问题标题】：NavBar adjustment for phones Rails and Bootstrap手机 Rails 和 Bootstrap 的导航栏调整
【发布时间】：2016-07-08 02:25:28
【问题描述】：

我想知道如何在移动设备上折叠导航栏的内容，以便它可以有一个主页链接，然后是三个破折号，当点击下拉并显示所有其他链接。这是我的 _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 及更大屏幕的媒体查询？

非常感谢任何帮助！

【问题讨论】：

不清楚你想做什么，你的代码也有错误：一个随机的a标签和一个未关闭的ul。

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

【解决方案1】：

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

查看引导指南上的Changing the collapsed mobile navbar breakpoint 了解更多信息。

【讨论】：