Question

我是ruby的新手，这是我的第一个stackoverflow问题（虽然我已经使用了之前的问题和答案 - 谢谢stackoverflow社区！）所以请原谅我这是一个愚蠢的问题。

我已经看到了关于Heroku和boostrap.css问题的其他问题，但这并不是一个彻头彻尾的错误，因为它不能像预期的那样工作。

我最近使用boostrap.css提供的样式在我的Rails 3应用程序中添加了一个顶级导航栏。在文档中，他们建议在css文件中添加padding-top：40px，以便为导航栏腾出空间。

填充在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 />

Answer 1

我没有意识到你正在使用Asset Pipeline。这就是你的问题所在;您需要在提交和推送之前预先编译资产：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编译中为您执行此操作，这非常方便。

来自bootstrap.css的CSS属性无法被Heroku识别

1 个答案: