我正在使用 Ruby on Rails 和 Bootstrap (v4.0.0-alpha.6) 创建一个网站。我在屏幕顶部有一个导航栏，在 HTML 文档中，其下方有一个图片区域(目前使用库存图片)。
application.html.erb (主布局文件)
...
<title><%= full_title(yield(:title)) %></title>
<%= render 'layouts/rails_default' %>
<%= render 'layouts/shim' %>
...
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
<%= yield %>
</div>
<%= render 'layouts/footer' %>
...
home.html.erb
<% provide(:title, "Home") %>
<div class="center homePicBlock" id="homePicBlockOne">
<h1 id="homeHeaderText" class="headerText">Simutronix</h1>
<h2 id="homeSubText" class="subHeaderText">Radical Optimisation Solutions</h2>
<h3 id="homeSecondSubText" class="miniHeaderText">50 Year Proven Methods</h3>
<%= link_to "Request Consultation", signup_path, class: "btn btn-lg btn-primary" %>
</div>
_header.html.erb
<div class="container navbar-container">
<nav class="navbar navbar-toggleable-md fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDefault" aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h5><%= link_to 'Simutronix', home_path, id: "companyName" %></h5>
<%= image_tag("cogsNewSmall.png") %>
<div class="collapse navbar-collapse" id="navbarDefault">
<ul class="navbar-nav mr-auto">
<span id="leftNavLinks">
<%= link_to 'Home', home_path %>
<%= link_to 'Products and Solutions', products_path %>
<%= link_to 'Company Background', background_path %>
<%= link_to 'About', about_path %>
</span>
<span id="rightNavLinks">
<%= link_to 'Help', help_path %>
<%= link_to 'Contact', contact_path %>
</span>
</ul>
</div>
</nav>
static_pages.scss
@import "bootstrap";
/* home */
#homePicBlockOne {
background-image: url("businessServicesSmall.jpg");
}
.homePicBlock {
padding: 10px;
}
...
header.scss
@import "bootstrap";
/* header */
#logo {
clear: right;
padding-top: 0px !important;
margin-left: 25px !important;
margin-top: 15px !important;
}
#companyName {
color: #acb8a9 !important;
position: relative;
bottom: 20px;
margin-left: 25px !important;
margin-right: 10px !important;
&:hover {
text-decoration: none;
}
}
.navbar {
padding-top: 0px !important;
background-color: rgba(251, 250, 250, 0.8);
}
#leftNavLinks {
margin-left: 25px;
}
#rightNavLinks {
margin-left: 45px;
}
nav {
a {
padding-right: 10px;
li {
position: relative;
top: 20px;
}
}
}
正如您从图片中看到的，库存图片出现在其中，而不是出现在导航栏下方，这不是我想要的。
虽然我可以通过相对向下定位图片 div 来解决这个问题，但这不是我想要做的，因为我担心这会给 future 带来问题，并带来不必要的副作用不同尺寸的屏幕等。那么，我想知道的是，如何正确更改导航栏，以便其他元素出现在文档流中的下方？
已更新以响应所提供的答案。
自定义.css
@import 'bootstrap';
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
最佳答案
导航栏fixed-top需要顶部的正文填充，因为它是position:fixed
body {
padding-top: 60px;
}
Body padding required The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
关于css - 图片出现在 Bootstrap 导航栏下方而不是下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42651341/