【发布时间】：2022-01-01 04:57:49
【问题描述】：
我正在尝试使用 boostrap 构建一个小型信息网站，只是为了让自己熟悉它。一切正常，直到我意识到我所有页面的屏幕底部都有一个水平滚动条，而且，无论我尝试什么，右侧似乎始终存在一个小间隙。我使用 container-fluid 类将我的元素放置在 DIV 中。我已经覆盖了 container-fluid 类，并使左右填充 0px 以及边距。所以我回到了页面最简单的骨架，只不过是一个导航栏和一些带有红色边框的 div 的行和列。我已经阅读了几个类似的问题并尝试了他们的所有建议，但没有任何效果。谁能告诉我我在这里缺少什么？下面是我正在使用的骨架 HTML 和相关的 CSS：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Black Lotus Designs</title>
<!--Fontawesome Icons-->
<script src="https://use.fontawesome.com/e07888a3dd.js"></script>
<!--CSS-->
<link rel="stylesheet" href="./bootstrap-5.0.2-dist/css/bootstrap.css">
<link rel="stylesheet" href="./Javascript/jquery-ui-1.13.0/jquery-ui.css">
<!--JQuery-->
<script type="text/javascript" src="./Javascript/jquery-3.6.0.js"></script>
<!--Jquery UI-->
<script type="text/javascript" src="./Javascript/jquery-ui-1.13.0/jquery-ui.min.js"></script>
<!--animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css"/>
<!--Textillate File-->
<script type="text/javascript" src="./Javascript/jquery.lettering.js"></script>
<script type="text/javascript" src="./Javascript/jquery.textillate.js"></script>
<!-- Google Fonts-->
<!--Spectral-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Spectral&display=swap" rel="stylesheet">
<!--Oswald-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Brawler&family=Caladea&family=Oswald:wght@300&family=Poppins:wght@100;200&family=Roboto:wght@300&family=Spectral&display=swap" rel="stylesheet">
<!-- Brawler-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Brawler&family=Caladea&family=Poppins:wght@100;200&family=Roboto:wght@300&family=Spectral&display=swap" rel="stylesheet">
<!-- -->
<!--bootstrap javascript file-->
<script src="./bootstrap-5.0.2-dist/js/bootstrap.min.js"></script>
<!--custom css file-->
<link rel="stylesheet" href="./CSS/globals.css">
<link rel="stylesheet" href="./CSS/about.css">
<!--BOOTSTRAP OVERRIDES-->
<style>
</style>
<!--Custom Text Effects File-->
<!--<script type="text/javascript" src="./Javascript/textEffects.js"></script>-->
</head>
<header>
<!--Navbar Region-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./Images/tabIcon.png"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="./index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="link" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="background:black;color:white;">
<li><a class="dropdown-item ddMenu_Color active" aria-current="page" href="./services.html">Services</a></li>
<li><a class="dropdown-item ddMenu_Color" href="#">Typographic Elements</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item ddMenu_Color" href="#">Basic Animations</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="./portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Contact</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!--End of Navbar Region -->
</header>
<div class="container-fluid">
<section>
<div class="row">
<div class="col red"></div>
<div class="col red"></div>
<div class="col red"></div>
</div>
<div class="row">
<div class="col red"></div>
<div class="col red"></div>
<div class="col red"></div>
</div>
<div class="row">
<div class="col red"></div>
<div class="col red"></div>
<div class="col red"></div>
</div>
</section>
</div>
</html>
CSS：
.red {
border: 2px solid red;
width:150px;
height:150px;
}
.container-fluid {
padding-left: 0px !important;
padding-right: 0px !important;
margin: 0px !important;
}
提前谢谢你....这太令人沮丧了，我认为这是我忽略的非常简单的事情。它总是让我感到非常明显的事情。这是一个屏幕截图——如果有比隐藏东西更好的解决方案，请告诉我 enter image description here
【问题讨论】：
标签： html css bootstrap-4