Question

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

我正在使用bootstrap，这个div有容器类。我想将它包装在div中以提供背景，类似于此twillio site。

这是一个简单的css manuever（或者我认为）所以我确定我在rails / bootstrap方面缺少一些东西。我正在使用几种布局，按照惯例惯例，经过大约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现在在背景中居中。非常类似于我列为参考的两万个网站。

Answer 1

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

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

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

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

没有什么可以干的。其他人想到更好的方法来做到这一点，我很肯定这只是我的修复。谢谢。

使用Rails App和Bootstrap简单的CSS误解

2 个答案: