Bootstrap 显示移动导航栏而不是桌面答案

【问题标题】：Bootstrap displays navbar for mobile instead desktopBootstrap 显示移动导航栏而不是桌面
【发布时间】：2018-05-09 10:45:24
【问题描述】：

我在 Rails 5.1 项目中使用 Bootstrap4，我使用

设置引导程序

gem 'bootstrap', '~> 4.0.0.beta2.1'

我按照所有说明添加了导航栏，但它看起来像移动版，但我的桌面尺寸是 1600px+ 宽。

有什么问题？这是布局和导航栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSGO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="container-fluid">
    <%= render partial: "shared/flash" %>
      <%= render 'shared/nav' %>
    <%= yield %>

    </div>
  </body>
</html>

导航栏部分

<div class="row">
  <div class="col-12">
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#">Hidden brand</a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </div>
</div>

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-5 bootstrap-4

【解决方案1】：

您的.navbar 需要一个额外的.navbar-expand{-sm|-md|-lg|-xl} 类（例如：.navbar-expand-md）。 Bootstrap 文档在这里提到了这一点：http://getbootstrap.com/docs/4.0/components/navbar/#how-it-works

【讨论】：

Ty，我怎么错过了这条线.. :)
很高兴为您提供帮助，欢迎来到 Stack Overflow。如果此答案或任何其他答案解决了您的问题，请将其标记为已接受。