Html Rails 5/Bootstrap 4:My Navbar在桌面上显示移动下拉菜单

这是我第一次使用Bootstrap4。对于Bootstrap3，我很少使用nav类

我使用的是Bootstrap4模板。我复制了整个样式表。除了导航栏，我可以让它工作。当我直接打开模板时，它会按预期工作。但是，我的版本在下拉菜单中显示css按钮，而不是在桌面上水平显示

以下是菜单的外观：

以下是我的菜单：

我试过最新版本的Safari、Chrome、Firefox和Opera。它们看起来一模一样

Gemfile

gem 'bootstrap', '~> 4.0.0'
gem 'sass-rails', '~> 5.0'
gem 'coffee-rails', '~> 4.2'
gem 'jquery-rails'

application.js

//= require jquery
//= require rails-ujs
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .

 *= require_tree .
 *= require_self

<header>
  <div class="tm-header">
      <div class="container-fluid">

        <div class="tm-header-inner">
                <%= link_to "Classic", locale_root_path, class: "navbar-brand tm-site-name" %>

          <!-- navbar -->
          <nav class="navbar tm-main-nav">

              <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">&#9776;</button>

              <div class="collapse navbar-toggleable-sm" id="tmNavbar">
                <ul class="nav navbar-nav">
                <li class="nav-item"><%= link_to "Home", locale_root_path, class: "nav-link" %></li>
                <li class="nav-item"><%= link_to "About", about_path, class: "nav-link" %></li>
                <li class="nav-item"><%= link_to "Blog", blog_path, class: "nav-link" %></li>
                <li class="nav-item"><%= link_to "Contact", contact_path, class: "nav-link" %></li>
                </ul>                        
              </div>

          </nav>  

        </div>     

    </div>                                  
  </div> 
</header>

应用程序.scss

//= require jquery
//= require rails-ujs
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .

 *= require_tree .
 *= require_self

<header>
  <div class="tm-header">
      <div class="container-fluid">

        <div class="tm-header-inner">
                <%= link_to "Classic", locale_root_path, class: "navbar-brand tm-site-name" %>

          <!-- navbar -->
          <nav class="navbar tm-main-nav">

              <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">&#9776;</button>

              <div class="collapse navbar-toggleable-sm" id="tmNavbar">
                <ul class="nav navbar-nav">
                <li class="nav-item"><%= link_to "Home", locale_root_path, class: "nav-link" %></li>
                <li class="nav-item"><%= link_to "About", about_path, class: "nav-link" %></li>
                <li class="nav-item"><%= link_to "Blog", blog_path, class: "nav-link" %></li>
                <li class="nav-item"><%= link_to "Contact", contact_path, class: "nav-link" %></li>
                </ul>                        
              </div>

          </nav>  

        </div>     

    </div>                                  
  </div> 
</header>

标题（更新前）

当我继续查看时，我看到模板使用的是引导4的alpha版本。我将所有隐藏的xx up类更改为对应的d-xx-none d-yy-block，其中yy是下一个更高的响应类。例如，在标题中，我将

hiddenmd-up

更改为

d-md-none d-lg-block

<button class="navbar-toggler d-md-none d-lg-block" type="button" data-toggle="collapse" data-target="#tmNavbar">&#9776;</button>

---

如何修改此选项以使导航栏正常工作？我将继续寻找解决方案。

在Bootstrap 4中没有

navbar Togleable-*

类组（不再）

将

导航栏可切换sm

替换为

导航栏扩展sm

这是从所需断点开始扩展导航栏的类。因此，

navbar expand sm

中的

sm

意味着：navbar将从较小（

sm

）屏幕大小扩展到更大

重要： 在Bootstrap4中根本无法使用当前代码

因此，即使在代码中用

navbar expand sm

替换

navbar togleable sm

，它仍然不起作用，因为您的代码不是引导4代码

以下是Bootstrap 4导航栏的工作原理：

搜寻

在您将更新发布到您的评论之前，我再次开始查看文档，并意识到我必须重写它。第一次读到这篇文章时，我认为我需要替换代码中的子句，但我发现我需要移动navbar expand sm类。我有几处小改动要做，但我正在按要求水平查看菜单。是的，我在仔细查看后更新了答案，意识到你需要做的不仅仅是更换一门课。我学到了教训。模板文档没有说明正在使用哪个版本的引导4。当我查看下载并看到模板中的引导文件是在2015年12月创建的时，我知道我可能正在处理不同版本的引导4。我只需要为导航栏移动一些CSS，我就会完成这些更改。非常感谢！另外，请记住，Bootstrap 4在默认情况下是基于flexbox的，而那些在默认情况下不是基于flexbox的部件可以轻松切换到具有本机Bootstrap 4类的flexbox。因此，建议远离不必要的css黑客，因为它们往往会把事情搞得一团糟，需要更多的css黑客来修复原始css黑客造成的问题。基本上，任何与定制css相关的flexbox都可以删除。我相信有一点flexbox代码。谢天谢地，CSS没有那么长，也不容易使用。我喜欢尽可能使用软件的原始版本：）完成。我以前就想这么做的。