如何让 bootstrap 占据整个屏幕

Question

我用 rail6 和 bootstrap 4 创建了一个应用程序。我遇到的问题是我的网站没有占据整个屏幕。顶部和侧面有很多白色space。我不知道如何解决这个问题。可以在此处查看该网站的实时版本 https://first-blog-001.herokuapp.com/。你马上就会明白我在说什么。

这是我的 html

<!DOCTYPE html>
<html>

  <head>
    <title>Blog</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>

  <body class="d-flex flex-column">
    <%= render 'layouts/navigation'%>
    <div id="page-content">
          <%= render 'layouts/messages' %>
      <%= yield %>
    </div>
    <%= render 'layouts/footer'%>
  </body>

这是我的css。我试过弄乱 margin: 0 并将宽度设为 100%，但这似乎不起作用。

@import 'bootstrap/dist/css/bootstrap';

.navbar {
    background-color: black !important;
}

.nav-link{
    color: white !important;
}

#logo {
    float: left;
    font-size: 1.7em;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-weight: bold;
}

#home-container{
    margin-top: 25px;
}

.jumbotron{
    background-image: asset-url('jumboCopy.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 425px;
}

/* Sticky Footer Classes */

html,
body {
  height: 100%;
  margin: 0 auto;
}

#page-content {
  flex: 1 0 auto;
  background-color: lightgray;
}

#sticky-footer {
  flex-shrink: none;
}

/* Other Classes for Page Styling */

Answer 1

从网站上看，显然是 body 有 margin 导致了这个问题。将 margin: 0 更改为正文应该可以解决问题，如果不能，添加 !important 应该可以。

body {
  margin: 0 !important;
}

如何让 bootstrap 占据整个屏幕

How to get bootstrap to take whole screen

html

css

bootstrap-4

ruby-on-rails-6