问题描述
我是一位有抱负的Web设计人员和开发人员，而我的代码并未使用Bootstrap框架覆盖我正在处理的项目的整个屏幕。我之前已经建立了类似的目标网页，却从未遇到过这个问题。我所附的屏幕截图显示，除导航栏和页脚以外，我所有主要元素的右侧都有空白区域。 jumbotron，div和
标签不能跨全宽，在屏幕上的右侧还有些多余。在320px上，情况更糟，有很多空间，而且看起来也不专业。 （包括用于桌面和320px响应视图的屏幕截图）
我尝试花费时间调整代码并在线寻找答案，但是找不到我想要的东西。请查看我的代码，让我知道我要去哪里，并更正我犯的任何错误。非常感谢任何花时间查看此问题并找出问题并为HTML / CSS提供正确调整的人。
谢谢！
Desktop screenshot 320 px screenshot
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Website</title>
<!-- required Meta tags -->
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body style="background-color: #f0f0f0;">
<header class="container">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color: #e3f2fd;">
<a class="navbar-brand active" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div><br> </div>
<!---------------------- opening Hero Section ---------------------->
<div>
<div class="jumbotron" style="background-image: url(./images/front-of-truck2.jpg); height: 672px; width: 100%; padding-top: 120px;">
<!-- <div class="container-fluid">
<div class="row">
<div class="col-4">
<img style="position: static; width: 250px; height: 150px;" src="./images/image.jpeg"/>
</div>
</div>
</div> -->
</div>
</div>
<!-------------------------------About section -------------------------------->
<div id="About" style="background-color: #f0f0f0; height: auto; width: 100%;" class="my-4">
<div class="container py-4">
<div class="row">
<div class="col-md-6 col-12">
<h1 class="py-2" style="color:#0400FF; letter-spacing: 1px;">About Us</h1>
<h2 class="text-primary pt-2" style="font-weight: 500;">
A Lores Ipsum company.
</h2>
</div>
<br>
<div class="col-md-6 col-12">
<center>
<img style="width: 100%; height: auto; border: 2px solid #ff8400;" alt="Black and White Semi-Transportation Trucks" src="./images/black-and-white-semi-trucks2.jpg"/>
</center>
</div>
</div>
</div>
</div>
<div><hr></div>
<!--------------------------------------Services section ------------------------------------>
<div id="Services" class="my-4">
<div class="container py-4 mt-5" style="opacity: .70;">
<div class="row">
<div class="col-md-6 col-12">
<center class="pt-2">
<img style="width: 100%; height: auto; border: 2px solid #ff8400;" alt="Black and White Semi-Transportation Trucks" src="./images/black-and-white-semi-trucks2.jpg"/>
</center>
</div>
<br>
<div class="col-md-6 col-12">
<h1 class="" style="color:#0400FF; letter-spacing: 1px;">
Services Provided
</h1>
<ul class="text-primary" style="font-weight: 500;">
<li style="padding-bottom: 5px;">Lores Ipsum</li>
<li style="padding-bottom: 5px;">Lores Ipsum</li>
<li style="padding-bottom: 5px;">Lores Ipsum</li>
<li>Lores Ipsum</li>
</ul>
</div>
</div>
</div>
</div>
<div><hr></div>
<!--------------------------Contact Us section --------------------------------->
<div id="Contact" class="top my-4" style="background-color: #f0f0f0; height: auto; width: 100%;">
<div class="container py-4">
<div class="row">
<!-- <div class="col-md-4 col-12">
<center>
<img style="width: 100%; height: 240px; border: 2px solid #ff8400;" alt="logo" src="./images/handshake-resized.jpg"/>
</center>
</div>
<br> -->
<div class="col-md-7 col-12">
<h1 class="py-2" style="color:#0400FF; letter-spacing: 1px;">Contact Us</h1>
<h3 class="text-primary pt-2" style="font-weight: 500;">
<span>
Customer Service <br> Lores Ipsum
</span>
</h3>
</div>
<br>
<div class="col-md-5 col-12">
<center>
<img style="width: 100%; height: 240px; border: 2px solid #ff8400;" alt="Customer Service" src="./images/customer-service.jpeg"/>
</center>
</div>
</div>
</div>
</div>
<div><hr></div>
<!----------------------------Apply Now ------------------------------------------>
<div id="Apply">
<div class="container py-4 mt-2" style="opacity: .70;">
<div class="row">
<div class="col-md-6 col-12">
<center class="pt-2">
<img style="width: 100%; height: auto; border: 2px solid #ff8400;" alt="Skyline Semitruck" src="./images/semi-truck2.jpg"/>
</center>
</div>
<br>
<div class="col-md-6 col-12">
<h1 class="text-center" style="color:#0400FF; letter-spacing: 1px;">
Apply Now!
</h1>
<br><br><br>
<center>
<button type="button" class="btn" style="border: 1px solid #00fbff;">
<h4>
<a href="">Apply Here!</a>
</h4>
</button>
</center>
</div>
</div>
</div>
</div>
<footer class="row footer" style="background-color: #00fbff;" valign="bottom">
<p class="pl-5 pt-1" style="color: #0400ff; font-weight: 500; font-size: 16px;">Lores Ipsum</p>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first,then Popper.js,then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvcwpIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnjsK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>解决方法
使用引导程序时，需要确保所有内容都包装在引导程序容器中。我没有看完所有代码，但向body标签添加了一个容器类，这减少了标签周围的空间：
<body class="container-fluid">。
查看此处：https://www.codeply.com/p/MZxoobGSWw
这可以解决您的问题吗？