Bootstrap v4.0.0-alpha.6 导航栏没有样式答案

【问题标题】：Bootstrap v4.0.0-alpha.6 navbar not stylingBootstrap v4.0.0-alpha.6 导航栏没有样式
【发布时间】：2017-03-01 00:33:32
【问题描述】：

我正在使用带有 Rails 5.0.1 的 Bootstrap v4.0.0-alpha.6 为我正在构建的一些网站创建个人通用模板。目前我有一个基本的布局文件、一个主页视图文件和一个在 scss 中的 Bootstrap 导入（以及其他一些现在不重要的点点滴滴）。

/sample_app/app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
                                              'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <%= link_to "Sites Template", '#', id: "logo" %>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Home",   '#' %></li>
            <li><%= link_to "Help",   '#' %></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

/sample_app/app/views/static_pages/home.html.erb

<div class="center jumbotron">
  <h1>Home Page</h1>

  <h2>
    Rails page
  </h2>

  <%= link_to "Call to action", '#', class: "btn btn-lg btn-primary" %>
</div>

<%= image_tag("rails.png", alt: "Rails logo")

/sample_app/app/assets/stylesheets/custom.scss

@import "bootstrap";

我还没有添加任何自定义样式，但目前站点导航栏根本没有样式。对于以前版本的 Bootstrap 和 Rails，我希望它的样式与上述代码类似（我记得，无论如何......）

如您所见，Bootstrap 是必需的，而 jumbotron 元素正在由 Bootstrap 设置样式。缺少 Bootstrap 默认导航栏样式是否可能是 Alpha 版本的 Bootstrap 的问题，或者 Rails 5 将 .scss 文件应用于布局模板而不是嵌套模板的方式（这导致 Bootstrap 样式跳过布局文件），还是别的什么？我刚刚将 Bootstrap gem 添加到我的 gemfile 并以正常方式运行 bundle install。非常感谢任何帮助。

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap model-view-controller sass

【解决方案1】：

您的 Bootstrap4 alpha6 代码似乎存在问题。我知道从 alpha5 到 alpha6，他们对导航栏进行了许多更改。

引用docs，

导航栏需要使用 .navbar-toggleable-* 包裹 .navbar 响应式折叠和配色方案类。

我认为缺少 'navbar-toggleable-*' 类会导致您的导航项无法水平对齐。

按照他们在文档中的示例，您的导航栏代码应该看起来更像这样：

<nav class="navbar navbar-toggleable-sm navbar-fixed-top bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <%= link_to "Sites Template", '#', id: "logo" %>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item">
        <%= link_to "Home", '#', class: "nav-link" %>
      </li>
      <li class="nav-item">
        <%= link_to "Help", '#', class: "nav-link" %>
      </li>
    </ul>
  </div>
</nav>

请注意，您缺少“nav-item”和“nav-link”类

希望有帮助

【讨论】：

我试过了，但还是不能正常工作。现在“站点”和“模板”这两个词垂直显示，“主页”和“帮助”两个词水平对齐，但除此之外，唯一应用的新样式是“主页”和“帮助”现在显示为白底白字因此除非突出显示，否则是不可见的。
啊，错过了 bg-inverse 变化。如您所见，导航栏类进行了很多更改..

【解决方案2】：

我从 Bootstrap 网站上的一个示例中找到并修改了代码，它正在工作。

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <%= link_to "Sites Template", '#', id: "logo" %>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <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="#">Help</a>
      </li>
    </ul>
  </div>
</nav>

看起来 v4.0.0-alpha6 Bootstrap 要求您使用 bg-inverse 显式反转导航栏背景，而不是仅依赖 navbar-inverse。 navbar-toggleable-* 现在似乎也需要正确的水平对齐。

【讨论】：

【解决方案3】：

如果您下载 Bootstrap v4 alfa 6 版本，它应该可以工作 - 以防万一尝试匹配您的 js 和 css Bootstrap 文件的版本以及文档示例。

我所做的是，从这个链接再次下载源代码：https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.6/bootstrap-4.0.0-alpha.6-dist.zip

并使用了此页面上的导航栏示例： https://v4-alpha.getbootstrap.com/components/navbar/

祝你好运！

【讨论】：