Атрибут CSS из bootstrap.css не распознается Heroku

#ruby-on-rails #css #heroku #ruby-on-rails-3.1 #twitter-bootstrap

#ruby-on-rails #css #heroku #ruby-on-rails-3.1 #twitter-bootstrap

Вопрос:

Я новичок в ruby, и это мой первый вопрос stackoverflow (хотя я использовал предыдущие вопросы и ответы на тонну — спасибо сообществу stackoverflow за это!), Поэтому, пожалуйста, извините меня, если это глупый вопрос.

Я видел другие опубликованные вопросы о проблемах с Heroku и boostrap.css, но это не столько прямая ошибка, сколько то, что работает не совсем так, как ожидалось.

Недавно я добавил верхнюю панель навигации в свое приложение Rails 3, используя стили, предоставленные boostrap.css. В документации они рекомендуют добавить padding-top: 40px в файл css, чтобы освободить место для панели навигации.

Заполнение выглядит правильно на localhost, но по какой-то причине не работает в Heroku. Остальная часть boostrap css кажется правильной (цвета кнопок, атрибуты таблицы и т.д.), Но я не могу вставить дополнение. Простым обходным путем было бы добавление некоторых
тегов в верхней части моего index.html файл, но я хотел бы понять, почему это происходит, если это указывает на более серьезную проблему css.

Код добавлен в файл bootstrap.css для заполнения:

 html, body {padding-bottom: 10px;
padding-right: 10px;   
padding-left: 10px;
padding-top: 40px; 
}
  

index.html код:

 <div class="topbar">
<div class="fill">
    <div class="container">
        <h3><%= link_to 'Your Book Club', homes_path %></h3>
        <ul>
            <li><%= link_to 'Home', homes_path %></li>
            <li class="active"><%= link_to 'Books', books_path %></li>
            <li><%= link_to 'Locations', locations_path %></li>
            <li><a href="#">Calendar</a></li>
      </ul>
      <form action="">
        <input type="text" placeholder="Search" />
      </form>
      <ul class="nav secondary-nav">
        <li class="menu">
            <a href="#" class="menu">Account stuff will go here</a>
            <ul class="menu-dropdown">
                <li><a href="#">Dolor sit</a></li>
                <li><a href="#">Amet Consequeter</a></li>
                <li class="divider"></li>
                <li><a href="#">Enough with the Latin</a></li>
            </ul>
        </li>
      </ul>
    </div>
</div>
</div>


<h1>Which books do you want to read as part of our book club?</h1>

<br />

<h3>Instructions:</h3>

<br />

<p>1. Vote for any of the books below that you'd like to read</p>

<br /><br/>

<p>2. And/or:

    <button type="submit" class="btn"><%= link_to 'Add a New Book', new_book_path %></button></p>

    <br /><br/>

<p>3.

    <button type="submit" class="btn info"><a href="./locations">Vote on     Locations</a></button> 


            <br /><br />

<table class="zebra-striped">
<tr>
<th>Title (Click name to see description)</th>
<th>ISBN</th>
<th>How many votes does it have?</th>
<th>Vote for this book</th>
<th></th>
</tr>


<% @books.each do |book| %>
<tr>

<td><%= link_to book.title, book %></td>
<td><%= book.isbn %></td>
<td><%= pluralize(book.votes.length, "vote") %></td>
<td><%= link_to ' 1', votes_path(:book_id => book.id), :method => :post %></td>  
<td><span class="label important"><%= link_to 'Delete', book, confirm: 'Are you sure?',             
                method: :delete %></span></td>
  </tr>
<% end %>

</div>

</table>

<br />
  

Комментарии:

1. Вы не забыли зафиксировать и нажать с соответствующим набором дополнений? Вы пробовали жесткое обновление (просто чтобы убедиться, что вы не видите устаревший css)?

2. Я несколько раз фиксировал (перемещал css в нижнюю часть файла, затем в верхнюю), но ничего. Я открыл приложение в другом браузере, и оно выглядит так же (без заполнения). Вы можете проверить это здесь: simple-water-5927.herokuapp.com/books

Ответ №1:

Я не уловил, что вы используете конвейер активов. Вот в чем ваша проблема; вам нужно предварительно скомпилировать свои активы, прежде чем совершать фиксацию и нажимать: http://devcenter.heroku.com/articles/rails31_heroku_cedar

 bundle exec rake assets:precompile
git ci -a -m "Compile assets for production"
git push
  

Обратите внимание, что если вы используете Celadon Cedar, есть несколько крючков, которые сделают это за вас при компиляции slug, что действительно удобно.

Комментарии:

1. Вау, спасибо, это определенно что-то сделало! Проблема в том, что теперь все другие стили из bootstrap.css исчезли (с Heroku, а не с localhost). Вы знаете, почему css на Heroku выглядит иначе, чем css на моем локальном сервере?

2. Я только что перенес свой CSS из файла books.css.scss (для моей модели books) в файл application.css.scss, и теперь заполнение работает в Heroku! Должно быть, это как-то связано с конвейером ресурсов, о котором я сейчас узнаю здесь: guides.rubyonrails.org/asset_pipeline.html Спасибо coreyward за вашу помощь!

3. Нет проблем! Вы добавили строку для импорта bootstrap.css в свой файл application.css?

4. Нет, я просто скопировал css. Как бы я это сделал, добавив строку?

5. Вверху application.css используйте //= require bootstrap , а затем следующую строку //= require_self . Затем код bootstrap.css будет добавлен перед всем в application.css, и они будут уменьшены и объединены вместе в производстве.