首页 文章

Rails 4 Bootstrap部分样式

提问于
浏览
1

我一直无法将bootstrap-sass集成到我的任何Rails 4项目中 . 到目前为止,我只是部分渲染了bootstrap资产 . 我在搜索引导功能时使用了railstutorial.org . 我正在使用ch5(清单5.4)源代码,产生以下结果:

类btn-lg,btn-primary和navbar-right类正在运行 . 该页面生成按钮和部分结构化的导航栏,其中包含指向右侧的链接 . 但是,导航栏类大部分都不起作用 . 导航栏没有“反向”样式,整个div都没有任何文本样式 .

我一直在使用'rake assets:precompile'并在每次更新资产管道后重新启动服务器 .

Gemfile包含以上'jquery-rails' gem

gem 'rails', '4.2.0'
gem 'bootstrap-sass', '~> 3.3.3'
gem 'sass-rails', '>= 3.2'

custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap"

application.html.erb

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

home.hrml.erb中的按钮

<% provide(:title, "Home") %>
<div class="center jumbotron">
  <h1>Welcome to the Sample App</h1>

  <h2>
    This is the home page for the
    <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    sample application.
  </h2>

  <%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
</div>

<%= link_to image_tag("rails.png", alt: "Rails logo"),
            'http://rubyonrails.org/' %>

1 回答

  • 0

    你是如何处理application.css文件的?

    确保自我之后加载引导程序

    例如,在我的application.css中,我有

    /*
        *= require_self
        *= require main
    
    */
    

    在我的main.scss中,我有自己的引导程序

    @import "bootstrap-sprockets";
    @import "bootstrap";
    

    您也可以尝试清理资产,但我不认为这是问题所在

相关问题