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

【问题标题】：Pictures appearing underneath Bootstrap navbar instead of below it图片显示在 Bootstrap 导航栏下方而不是下方
【发布时间】：2017-07-27 20:10:47
【问题描述】：

我正在使用 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;
  }
}

【问题讨论】：

所以你想让 3 档图像不在那里显示？或与 3 人合影。
三个人的图片应该出现在导航栏下方。三个齿轮图像是徽标，是导航栏的一部分。
我最好的猜测是将home.html.erb内容放入`
，然后它应该与导航栏有一个相对位置并将其推到它下面，它应该是以上
我尝试将所有 home.html.erb 内容放在一个具有行类的 div 中，但它不起作用。我也尝试在<div class="center homePicBlock" id="homePicBlockOne"> 之前添加<div class="row">，但这也不起作用。
好吧，我试过哈哈，很好，你找到了解决方案。干杯