Частичная стилизация Rails 4 Bootstrap

У меня возникли проблемы с интеграцией bootstrap-sass в любой из моих проектов Rails 4. Пока я получаю только частичный рендеринг ресурсов начальной загрузки. Я прибегал к использованию railstutorial.org в поисках функциональности начальной загрузки. Я использую исходный код ch5 (листинг 5.4) и получаю следующие результаты:

Классы btn-lg, btn-primary и navbar-right классы работают. На странице есть кнопки и частично структурированная панель навигации со ссылками справа. Однако классы навигации по большей части не работают. Панель навигации не имеет «обратного» стиля, весь div размыт без какого-либо стиля текста.

Я использовал 'rake assets: precompile' и перезапускал сервер после каждого обновления конвейера ресурсов.

Gemfile содержит следующее над гемом jquery-rails

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/' %>


ruby-on-rails html css twitter-bootstrap bootstrap-sass
person rpenn30    schedule 22.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Как вы обрабатываете свой файл application.css?

Убедитесь, что загрузчик загружается после self

Например, в моем application.css у меня есть

/*
    *= require_self
    *= require main

*/

И в моем main.scss у меня есть мой бутстрап

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

Вы также можете попробовать очистить активы, хотя я не думаю, что это проблема.

person Clam    schedule 24.01.2015
comment
мой application.css и main выглядят одинаково. - person rpenn30; 03.02.2015