Bootstrap在移动设备上显示导航栏而非桌面设备

3
我正在我的Rails 5.1项目中使用Bootstrap4,我已经设置好了Bootstrap。
gem 'bootstrap', '~> 4.0.0.beta2.1'

我遵循了所有的指示并添加了导航栏,但它看起来像是移动端版本,而我的桌面显示器尺寸为1600像素以上。问题出在哪里呢?下面是页面布局和导航栏。
<!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>
1个回答

0

谢谢,我不知道我是怎么错过这行的.. :) - Daniel
很高兴能为您提供帮助,并欢迎来到 Stack Overflow。如果这个答案或其他任何答案解决了您的问题,请将其标记为已接受。 - dferenc

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接