0
我已阅读了大约6-8篇关于此相同问题的文章,但我无法在我的上下文中找到任何可行的解决方案。如何通过全屏覆盖透明导航栏Jumbotron
我遇到的问题是我有一个透明的导航栏和一个全屏的jumbotron,但我无法使jumbotron在导航栏下移动。换句话说,我试图让我的超大屏幕完全全屏,然后将导航栏放在它的顶部。
我已经试过
- 我试图用身体填充像其他一些用户瞎搞建议,但做过的一切已经使顶部的白色空间更大,从来没有小。
- 我试图将jumbotron和navbar的填充和边距定义为0,并且在某些情况下,我希望能够推动jumbotron的负数。那什么都没做。
- 我试着让jumbotron的margin-top和margin-bottom是一个很大的负数。这确实解决了这个问题,因为顶部不再有空白区域,但是它留下了我的jumbotron内容,并留下了底部的空白区域。
- 自从Bootstrap文档声称“我的固定导航栏会覆盖你的其他内容,除非你将填充添加到主体的顶部,我尝试给导航栏一个固定的类。”这不起作用,要么导致我相信间距问题是由jumbotron引起的,但我不明白我会如何解决它。
我需要帮助来解决这个问题。我正在使用Ruby on Rails。这里是我的application.html.erb包含我的Navbar:
<!DOCTYPE html>
<html>
<head>
<title>Light Bulb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= stylesheet_link_tag 'application', 'https://fonts.googleapis.com/css?family=Lobster+Two', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="/">Light Bulb</a>-->
<%= link_to root_path, class: 'navbar-brand nav-font' do %>
<i class="fa fa-lightbulb-o" id="fa-size"></i>
Light Bulb
<% end %>
</div>
<div class="collapse navbar-collapse" id="main-nav-collapse">
<div class = "nav navbar-nav navbar-right">
<% if current_user %>
<%= button_to "Sign Out", destroy_user_session_path, method: :delete, class: "btn btn-primary navbar-btn" %>
<% else %>
<%= link_to "Log In", new_user_session_path, class: "btn btn-primary navbar-btn", method: :get %>
<%= link_to "Sign Up", new_user_registration_path, class: "btn btn-success navbar-btn", method: :get %>
<% end %>
</div>
<% if controller_name === "pages" && action_name === "homepage" %>
<ul class="nav navbar-nav navbar-right nav-font">
<% else %>
<ul class="nav navbar-nav navbar-right nav-font-inverted">
<% end %>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", new_contact_path %></li>
</ul>
</div>
</div>
</nav>
<% if controller_name === "pages" && action_name === "homepage" %>
<%= yield %>
<% else %>
<div class="container">
<% flash.each do |key, value| %>
<%= content_tag :div, value, class: "alert alert-#{key}" %>
<% end %>
<%= yield %>
</div>
<% end %>
</body>
</html>
这里是我的homepage.html.erb有我的超大屏幕:
<div class="jumbotron text-center">
<div class="container">
<h1>Welcome to Light Bulb</h1>
<h3>Turn your ideas into reality!</h3>
</div>
</div>
这是我的CSS文件:
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
.navbar.transparent.navbar-inverse {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop(0% , rgba(0,0,0,0.00)),color-stop(100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
margin-bottom: 0px;
}
.jumbotron {
margin-top: 0px;
margin-bottom: 0px;
}
.navbar-brand.nav-font {
color: black;
font-size: 1.7em;
font-family: "Lobster Two"
}
.navbar-brand.nav-font:hover {
color: black;
}
.navbar-nav.nav-font li a {
color: black;
text-align: center;
font-family: "Lobster Two";
font-size: 1.6em;
// padding-left: 2em;
// padding-right: 2em;
width: 10em;
height: 3em;
display: block;
line-height: 35px;
-o-transition:.6s;
-ms-transition:.6s;
-moz-transition:.6s;
-webkit-transition:.6s;
transition: .6s;
}
.navbar-nav.nav-font-inverted li a {
color: red;
text-align: center;
font-family: "Lobster Two";
font-size: 1.6em;
// padding-left: 2em;
// padding-right: 2em;
width: 10em;
height: 3em;
display: block;
line-height: 35px;
-o-transition:.6s;
-ms-transition:.6s;
-moz-transition:.6s;
-webkit-transition:.6s;
transition: .6s;
}
#fa-size {
font-size: 1.7em;
}
.navbar-nav.nav-font li a:hover {
color: white;
background: rgba(0,0,0, 0.7);
}
.contact-padding {
margin-top: 5em;
}
.form-dimensions-contact {
height: 40px;
}
.contact-form-border {
border-radius: 25px;
// color: rgba(130, 130, 130, 0.5);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
// opacity: 0.9;
background: rgba(255,255,255,0.2);
}
.jumbotron{
height: 100vh;
}
我不确定你的意思。我的jumbotron是在navbar div之外的。在我的applications.html.erb文件中,如果你在关闭导航标签之后查看,那么会有一个if语句将第一个分支放到我的主页上,从而呈现我的jumbotron。 – Jubl
我的不好。它是。但你用** **关闭了你的** navbar **而开放是** div ** – Abbr
Soliver哦,我的上帝,这实际上是我的问题-__-我改变/导航到/ div,现在很好。 – Jubl