对 Rails App 和 Bootstrap 的简单 CSS 误解答案

【问题标题】：Simple CSS misunderstanding with Rails App and Bootstrap对 Rails App 和 Bootstrap 的简单 CSS 误解
【发布时间】：2012-08-30 11:55:46
【问题描述】：

我想在我的网站seen here 的主页上为我的主 div 添加一个包装器。我还没有购买 ssl 证书。

我正在使用引导程序，这个 div 有 container 类。我想将它包装在一个 div 中以提供背景，类似于 twillio site。

这是一个简单的 css 操作（或者我是这么认为的），所以我确定我在 rails/bootstrap 方面遗漏了一些东西。根据 Rails 约定，我使用了几种布局，经过大约 3 个小时的尝试来解决这个问题，我担心在这里遗漏了一些更深层次的东西。感谢您对此的帮助。

<div class="center hero-unit" id="homegreen">
<h1>54footy</h1>
<iframe width="550" height="315" src="http://www.youtube.com/embed/1hQmlFzqJyo" frameborder="0" allowfullscreen></iframe>
<p>Your Heroes here -54footy</p>    
<%= link_to "Pick your Hero", signup_path, class: "btn btn-large btn-primary" %>    
<input type="text" data-provide="typeahead" data-source="["Option 1","Option 2","Option 3"]">
</div>

application.html.erb

<!DOCTYPE html>
<html>
 <head>
  <title><%= full_title(yield(:title)) %></title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <%= render 'layouts/shim' %>
 </head>
 <body>
   <%= render 'layouts/header' %>
   <div class="container">
    <% flash.each do |key, value| %>
     <%= content_tag(:div, value, class: "alert alert-#{key}") %>
    <% end %>
    <%= yield %>
    <%= render 'layouts/footer' %>
    <%= debug(params) if Rails.env.development? %>
   </div>
 </body>
</html>

当我尝试为背景插入一个 div 时，它就像容器一样居中，我本质上希望它拉伸页面的整个长度，并让那里的 div 现在在背景中居中内容。与我列为参考的 twillion 站点非常相似。

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

我看到的第一件事是你没有关闭它

<div class="center hero-unit" id="homegreen">

尝试在最后添加</div>... :D

【讨论】：

啊，这是一个文本伙伴，所以复制和粘贴错误已修复。谢谢
知道我能做什么吗？在静态页面 html 中从本质上转义应用布局中的容器类？

【解决方案2】：

在我的静态页面控制器中我添加了

render :layout => false

然后，我复制了我的应用程序布局并将其放在我的主视图中。从那里我能够以我以前无法做到的方式操纵家庭 css。基本上将问题中的上述代码添加到问题中的后一个代码中。

 <!DOCTYPE html>
 <html>
  <head>
   <title><%= full_title(yield(:title)) %></title>
   <%= stylesheet_link_tag    "application", :media => "all" %>
   <%= javascript_include_tag "application" %>
   <%= csrf_meta_tags %>
   <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
     <div id="wrapper" style="height:600px; background-color:red;">
      <div class="container">
    <% flash.each do |key, value| %>
      <%= content_tag(:div, value, class: "alert alert-#{key}") %>
    <% end %>
        <div>
          <span id="home_pic">
            <img src="http://placehold.it/550x315">
          </span>
        </div>
       </div>
     </div>
   <div class="container">
      <%= render 'layouts/footer' %>
     <%= debug(params) if Rails.env.development? %>
   </div>   
  </body>
 </html>

这并没有什么干的。其他任何人都想到了更好的方法来做到这一点，我很肯定这只是我的解决方案。谢谢。

【讨论】：