如何让引导程序占据整个屏幕答案

【问题标题】：How to get bootstrap to take whole screen如何让引导程序占据整个屏幕
【发布时间】：2020-11-28 02:52:24
【问题描述】：

我使用 rail6 和 bootstrap 4 创建了一个应用程序。我遇到的问题是我的网站没有占据整个屏幕。顶部和侧面有很多空白区域。我不知道如何解决这个问题。可以在此处查看该网站的实时版本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 */

【问题讨论】：

标签： html css bootstrap-4 ruby-on-rails-6

【解决方案1】：

从网站上看，很明显，body 有 margin 导致了这个问题。将margin: 0改为body应该可以解决问题，如果没有，添加!important应该可以。

body {
  margin: 0 !important;
}

【讨论】：