它是如此基础,但我似乎不能正确理解它。导航栏位于导航栏下方之后的正文文本的一部分。此外,当出现警告消息(例如,错误的凭据)时,它会被定位在导航栏的下方,因此无法读取。我做错了什么?(我使用的是Rails 3.2和Ruby 4)。
在application.html.erb中,我有:
<%= render "layouts/header" %>
<% flash.each do |name,msg| %>
<p class="alert"><%= content_tag :div, msg, :id => name %></p>
<% end %>
<p class="notice"><%= notice %></p>
<%= yield %>
<%= render "layouts/footer" %>
它所呈现的html代码的一部分:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
...etc...
</div><!--/.nav-collapse -->
</div>
</nav>
<p class="notice"></p>
<h2>Log in</h2>
<form accept-charset="UTF-8" action="/users/sign_in" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="GRy...00Z1w=" /></div>
<div class="field">
<label for="user_email">Email</label><br />
...etc...
关于CSS,我使用bootstrap,除了:
导航的-CSS:
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.loginnaam {
font-size: 11px;
padding: 16px 10px;
}
文本的-CSS:
/* JUMBOTRON ON HOME
================================================== */
.jumbotron {
background-image: url('http://www.....com/....jpg');
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
/* CUSTOMIZE THE CAROUSEL
================================================== */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* ILLUSTRATIES
================================================== */
.illustraties{
background-color: #efefef;
border-bottom: 1px solid #dbdbdb;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
发布于 2015-01-31 18:08:27
你的导航栏是固定的,这意味着它保持在所有内容之上,除非有更高的z索引的内容有绝对或固定的位置。
只需在你的身体上添加一个页边距,就像导航栏的高度一样多。那么你所有的内容都应该留在导航栏下面。
发布于 2019-09-26 18:29:00
如果您要将其设置为绝对。你可能需要给出宽度为100%我基本上移动了整个导航到标题标签,并定义如下
header{
position: absolute;
z-index:2;
width: 100%;
}
https://stackoverflow.com/questions/28250261
复制相似问题