gpt4 book ai didi

css - 如何制作全宽超大屏幕?

转载 作者:行者123 更新时间:2023-11-28 08:51:34 25 4
gpt4 key购买 nike

如果您查看 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 说,我也在没有容器的情况下尝试过,

“要使超大屏幕全宽且没有圆 Angular ,请将其放在所有 .container 之外,然后在其中添加一个 .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-headerjumbotron 之间出现了我不想要的填充。就像我说的,我想要它像 bootstrap site . partial 的另一个问题是我需要很多,因为我想根据页面更改 jumbotron 中的单词。

我们怎样才能像bootstap一样做到呢?

感谢您的宝贵时间!

最佳答案

是的,这是因为在 <%= yield%> 中呈现的任何内容都包含在 col-md-9 中。您可以:

  1. 在您想要全 Angular 超大屏幕的 View 中关闭 col-md-9,然后在页脚中重新打开它。
  2. 如果您的大部分 View 需要扩展到全宽,请不要在 application.rb 中使用 col-md-9。

编辑:

为避免重复,您可以将 jumbotron 样式粘贴到 layouts/headercontainer-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">
...

关于css - 如何制作全宽超大屏幕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29264937/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com