Question

我使用Bootstrap v4.0.0-alpha.6和Rails 5.0.1为我正在构建的一些网站创建个人通用模板。目前我有一个基本的布局文件，一个主页视图文件，以及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，并且正在通过Bootstrap设计jumbotron元素。是否缺少Bootstrap默认导航样式可能是Alpha版Bootstrap的问题，或者Rails 5将.scss文件应用于布局模板而不是嵌套模板（这导致Bootstrap样式跳过布局文件），还是其他什么？我刚刚将Bootstrap gem添加到我的gemfile中并以正常方式运行bundle install。任何帮助非常感谢。

Answer 1

看起来你的Bootstrap4 alpha6代码存在问题。我知道从alpha5到alpha6，他们对导航栏进行了一些更改。

引用docs，

Navbars需要使用.navbar-toggleable- *包装.navbar 响应式折叠和配色方案类。

我相信错过了＆＃39; navbar-toggleable - *＆＃39; class导致nav-items不能水平对齐。

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

<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>

请注意，您错过了＆＃39; nav-item＆＃39;和＆＃39; nav-link＆＃39;类

希望有所帮助

Answer 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-*来进行正确的水平对齐。

Answer 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/

祝你好运！

Bootstrap v4.0.0-alpha.6导航栏没有造型

3 个答案: