编辑：

Question

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

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

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

即使bootstrap说，我也尝试了没有容器，

＆＃34;要使jumbotron全宽，没有圆角，请将其放在所有.container之外，而是在其中添加.container。＆＃34;

是不是因为我的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那样做？

谢谢你的时间！

Answer 1

是的，这是因为<%= yield%>中呈现的内容包含在col-md-9中。你可以：

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

编辑：

为避免重复，您可以将jumbotron样式粘贴到layouts/header和container-fluid之间，并使用变量将其填充为特定于页面的文本。这就是我的意思：

<%= 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"> 
      ...

如何制作全宽度的超大尺寸？

1 个答案:

编辑：