如何使全宽度jumbotron？

本文介绍了如何使全宽度jumbotron？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如果您查看网站，他们的jumbotron会触及他们的 nav-header 。

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

 < div class =jumbotron> 
< div class =container> 
< h1>值< small>主观，放在这里不管激发你。 < / small>< / h1> 
< / div> 
< / div>

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

 
 
   
 
 $ b   
 b $ b 这是因为我的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 之间有我不想要的。就像我说的，我想要它像。另一个部分问题是我需要很多，因为我想根据页面更改 jumbotron 中的单词。
 $ b $ 
 
   >解决方案

是的，因为在<％= 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％> <！ - 此变量应该在您的控制器操作中分配 - > < / p> < / div> < div class =container-fluid> < div class =container> <！ - 检查这一点。不确定为什么你有两个容器 - > < div class =col-md-9> ...

If you look at the twitter-bootstrap website their jumbotron touches their nav-header. That's what I'm trying to replicate.
I added it to the top of my valuations index like so:
<div class="jumbotron"> <div class="container"> <h1>Values <small>subjective, put here whatever inspires you. </small></h1> </div> </div>
I also tried it without the container even though bootstrap says,
"To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within."
Is it because my application.html.erb is broken down into columns and so the jumbotron will only expand to the width of the 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>
I tried putting in its own partial but then there was padding between the nav-header and the jumbotron that I don't want. Like I said I want it like the bootstrap site. The other problem with a partial is I'd need a lot of them because I want to change the words in the jumbotron depending on the page.
How can we do it like bootstap?
Thanks for your time!
解决方案
Yes, it's because whatever is rendered in the <%= yield%> gets wrapped in col-md-9. You can either:
close col-md-9 in views where you want to have the full-width jumbotron, and re-open it again in the footer.
don't use col-md-9 in application.rb if most of your views need to be expanding to full width.
EDIT:
To avoid repetition, you can paste the jumbotron styling in between your layouts/header and container-fluid, and use a variable for populating it with page-specific text. Here is what I mean:
<%= 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 %>  </p> </div> <div class="container-fluid"> <div class="container">  <div class="col-md-9"> ...

这篇关于如何使全宽度jumbotron？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！