bootstrap.css的CSS属性不能被Heroku识别



我是ruby新手,这是我第一个stackoverflow问题(尽管我已经使用了很多以前的问题和答案-感谢stackoverflow社区!)所以如果这是一个愚蠢的问题,请原谅我。

我已经看到了其他关于Heroku和boostrap.css问题的问题,但这并不是一个完全的错误,因为它没有像预期的那样工作。

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

填充在本地主机上看起来是正确的,但由于某种原因在Heroku中不起作用。其余的bootstrap css似乎是正确的(按钮颜色,表属性等),但我不能使填充棒。一个简单的解决方法是在index.html文件的顶部添加一些
标签,但我想了解为什么会发生这种情况,以防它表明存在更大的css问题。

为bootstrap.css文件添加padding:

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

我没有抓住你正在使用资产管道。这就是你的问题所在;你需要在提交和推送之前预编译你的资产: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,则有一些钩子可以在鼻涕虫编译时为您完成此操作,这非常方便。

最新更新