Question

我正在使用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来解决这个问题，但这不是我想做的事情，因为我担心它会导致未来的问题和不必要的副作用不同大小的屏幕等。所以，我想知道的是，如何正确地改变导航栏，以便文档流程中的其他元素出现在它下面？

根据提供的答案进行了更新。

custom.css

@import 'bootstrap';

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

Answer 1

导航栏fixed-top需要在顶部填充身体，因为它是position:fixed

body {
   padding-top: 60px;
}

这是mentioned in the docs ..

需要身体填充固定的导航栏将覆盖您的其他内容，除非您添加填充到顶部。尝试自己的价值观或使用下面的代码段。提示：默认情况下，导航栏高50像素。

图片显示在Bootstrap导航栏下方而不是在其下方

1 个答案: