How to make a full-width jumbotron?

2020-04-07 18:55发布

站内问答 / HTML/CSS
1484 1 5

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!

1条回答
闹够了就滚
2楼-- · 2020-04-07 19:21

Yes, it's because whatever is rendered in the <%= yield%> gets wrapped in col-md-9. You can either:

  1. close col-md-9 in views where you want to have the full-width jumbotron, and re-open it again in the footer.
  2. 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 %> <!-- 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"> 
      ...
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)