Css 如何制作一个全幅面的巨型机器人？

如果你查看网站，他们的jumbotron会触碰他们的

导航标题

。这就是我想要复制的

我将其添加到估值指数的顶部，如下所示：

<div class="jumbotron">
 <div class="container">
  <h1>Values <small>subjective, put here whatever inspires you. </small></h1>
 </div>
</div>

我试着把它自己的部分放进去，但是在

nav头

和

jumbotron

之间有我不想要的填充。就像我说的那样，我想要它。partial的另一个问题是我需要很多，因为我想根据页面更改

jumbotron

中的单词

我们怎么能像bootstap那样做

---

谢谢你的时间

是的，这是因为

中呈现的任何内容都被包装在

col-md-9

中。您可以：

在要使用全宽jumbotron的视图中关闭

col-md-9

，然后在页脚中再次打开它

如果大多数视图需要扩展到全宽，请不要在

application.rb中使用col-md-9

编辑： 为了避免重复，您可以将jumbotron样式粘贴在

布局/标题

和

容器流体

之间，并使用变量填充页面特定文本。我的意思是：

<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
  <%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="jumbotron">
  <p class="text-center">
  <%= @jumbotext %> <!-- this variable should be assigned in your controller action-->
  </p>
</div>
<div class="container-fluid">
  <div class="container"> <!-- check this too. not sure why you have two containers-->
    <div class="col-md-9"> 
      ...

...

谢谢@Dimitry\N我也有一个类似于引导的侧栏，因此删除

col-md-9

会迫使侧栏位于内容下方。我被你的1弄糊涂了。你是说在每个视图中添加

col-md-9

，然后把

jumbotron

放在上面？我可以看出这是可行的，但这不是很重复吗？不，您可以将

col-md-9

保留在

应用程序

布局中，但是如果一个视图需要这个全宽的jumbotron，请从

开始，然后添加
jumbotron
，然后重新打开
col-md-9`。看一看：Dimitry\N每页都会有jumbotron（里面有不同的措辞）。我想我必须将其从application.rb中删除，并将其放在jumbotron下的视图中。你认为这是最好的办法吗？@rubyonrailsbeginer啊，我现在明白你的意思了。在我修改答案之前还有最后一个问题。在所有视图中，jumbotron的位置是否始终相同？是的，使用我上面提到的方法，除非我在application.rb中将
容器流体
和
容器
移动到其下方，否则无法使其全宽，但当我移动时，侧边栏再次下降到内容下方errrrrrr
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
  <%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="jumbotron">
  <p class="text-center">
  <%= @jumbotext %> <!-- this variable should be assigned in your controller action-->
  </p>
</div>
<div class="container-fluid">
  <div class="container"> <!-- check this too. not sure why you have two containers-->
    <div class="col-md-9"> 
      ...