Css 引导v4.0.0-alpha.6导航栏未设置样式_Css_Ruby On Rails_Twitter Bootstrap_Model View Controller_Sass

Css 引导v4.0.0-alpha.6导航栏未设置样式

css ruby-on-rails twitter-bootstrap model-view-controller sass

Css 引导v4.0.0-alpha.6导航栏未设置样式,css,ruby-on-rails,twitter-bootstrap,model-view-controller,sass,Css,Ruby On Rails,Twitter Bootstrap,Model View Controller,Sass,我正在使用Bootstrap v4.0.0-alpha.6和Rails 5.0.1为我正在构建的一些网站创建一个个人通用模板。目前，我有一个基本布局文件、一个主页视图文件和一个导入，用于在SCS中引导（以及其他一些现在并不重要的部分） /sample\u app/app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title><%= full_

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

/sample\u 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>

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

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

如您所见，中需要引导，而jumbotron元素正由引导设置样式。缺少引导默认导航栏样式可能是Alpha版本引导的问题，还是Rails 5将.scss文件应用于布局模板而不是嵌套模板的方式（导致引导样式跳过布局文件）的问题，还是其他问题？我刚刚将引导gem添加到我的gem文件中，并以正常方式运行了

bundle安装。非常感谢您的帮助
 您的Bootstrap4 alpha6代码似乎有问题。我知道从alpha5到alpha6，他们对导航栏做了很多更改
引用
导航栏需要使用.navbar和.navbar toggleable-*包装
响应性折叠和颜色方案类
我认为缺少“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>









请注意，您缺少“导航项目”和“导航链接”类
希望这对我有所帮助
我从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引导程序要求您使用bg inverse
显式反转导航栏背景，而不仅仅依赖navbar inverse
navbar toggleable-*
现在似乎也需要进行正确的水平对齐。
如果下载Bootstrap v4 alfa 6版本，它应该可以工作-以防万一，请尝试匹配js和css引导文件的版本以及文档示例
我所做的是，从这个链接再次下载源代码：
并在此页面上使用了导航栏示例：

祝你好运 我试过了，但仍然不能正常工作。现在单词“站点”和“模板”垂直显示，单词“主页”和“帮助”水平对齐，但除此之外，唯一应用的新样式是“主页”和“帮助”现在显示为白色对白色，因此除非突出显示，否则不可见。啊，错过了bg反向更改。如您所见，对navbar类进行了很多更改。。
<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>