【问题标题】：How to make a full-width jumbotron?如何制作一个全宽的jumbotron？
【发布时间】：2015-05-29 16:06:27
【问题描述】：

如果您查看twitter-bootstrap 网站，他们的jumbotron 会触及他们的nav-header。这就是我想要复制的内容。

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

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

即使引导程序说，我也在没有容器的情况下尝试过，

“要使 jumbotron 全宽且没有圆角，请将其放置在所有 .containers 之外，而是在其中添加一个 .container。”

是不是因为我的 application.html.erb 被分解成列，所以 jumbotron 只会扩展到 col-md-9 的宽度？

<body>
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
  <%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="container-fluid">
  <div class="container">
    <div class="col-md-9">
      <%= yield %>
    </div>
    <div class="col-md-3">
      <% if current_user.present? %>
        <%= render 'layouts/sidebar' %>
      <% end %>
  </div>
</div>

我尝试放入它自己的部分，但在 nav-header 和 jumbotron 之间有我不想要的填充。就像我说的，我想要bootstrap site。部分的另一个问题是我需要很多，因为我想根据页面更改jumbotron 中的单词。

我们怎样才能像 bootstap 那样做呢？

感谢您的宝贵时间！

【问题讨论】：

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

【解决方案1】：

是的，这是因为在 <%= yield%> 中呈现的任何内容都会被包裹在 col-md-9 中。您可以：

在您希望拥有全宽 jumbotron 的视图中关闭 col-md-9，然后在页脚中重新打开它。
如果您的大部分视图需要扩展到全宽，请不要在 application.rb 中使用 col-md-9。

编辑：

为避免重复，您可以在 layouts/header 和 container-fluid 之间粘贴 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 我也有一个像 bootstrap 这样的侧边栏，所以删除 col-md-9 会迫使侧边栏进入内容下方。我对您的 1 感到困惑。您是说在每个视图中添加 col-md-9，然后将 jumbotron 放在其上方？我可以看到这是可行的，但这不会有很多重复吗？
不，您可以将col-md-9 保留在application 布局中，但如果视图需要这个全角jumbotron，请以</div> then do the add the jumbotron, then re-open the col-md 开头-9`.看看：bootply.com/jbMuxsnSZH
Dimitry_N 每个页面都会有jumbotron（里面有不同的措辞）。我想我必须将它从 application.rb 中删除并将其放在 jumbotron 下的视图中。你认为这是最好的方法吗？
@RubyonRailsBeginner 啊哈，我明白你的意思了。在我修改答案之前的最后一个问题。 jumbotron 的位置在所有视图中是否始终相同？
是的，使用我上面提到的方法，除非我在 application.rb 中将 container-fluid 和 container 移动到它下面，否则我无法让它成为全角，但是当我这样做时侧边栏再次低于内容 errrrrrr