我不知道引导程序是否适用于这种形式，但页面是否可能占据页面的整个区域而不是中心？ 如果没有那么我至少可以在整个页面上放一个图像？（对不起，如果我没有多大意义）。所以，任何帮助都非常感谢！
HTML：
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap 4 Layout</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">CompanyName</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">Products</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Product 1</a>
<a class="dropdown-item" href="#">Product 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Product 1</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide p-3" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/painter.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/sydney.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/thing.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card ">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card ">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
<div class="row mt-sm-4 mt-md-0">
<div class="col-sm-12 col-md-8 text-sm-center text-md-left">
<h3>Important heading</h3>
<p class="lead">A sort of important subheading can go here, which is larger and gray.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis lorem ac diam vestibulum, vitae tempor nulla aliquam. Nam in accumsan libero, et tempus nisi. Vivamus luctus turpis efficitur, vehicula tortor sed, lacinia nunc. Suspendisse eu hendrerit est. Donec placerat placerat facilisis. Sed interdum vitae metus et efficitur. Fusce pretium sed enim eget maximus. </p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis lorem ac diam vestibulum, vitae tempor nulla aliquam. Nam in accumsan libero, et tempus nisi. Vivamus luctus turpis efficitur, vehicula tortor sed, lacinia nunc. Suspendisse eu hendrerit est. Donec placerat placerat facilisis. Sed interdum vitae metus et efficitur. Fusce pretium sed enim eget maximus. </p>
</div>
<div class="footer sm-12 text-sm-center bg-secondary">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis lorem ac diam vestibulum, vitae tempor nulla aliquam. Nam in accumsan libero, et tempus nisi. Vivamus luctus turpis efficitur, vehicula tortor sed, lacinia nunc. Suspendisse eu hendrerit est. Donec placerat placerat facilisis. Sed interdum vitae metus et efficitur. Fusce pretium sed enim eget maximus. </p>
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"><`enter code here`/script>
<script src="/js/bootstrap.min.js"></script>
</body>`enter code here`
</html>
答案 0 :(得分：1)
如docs中所述：
容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时是必需的。
类container的容器div将是：
固定宽度容器（意味着它在每个断点处的最大宽度变化）或流体宽度（意味着它始终为100％宽）。
当一个容器container-fluid：
使用.container-fluid作为全宽容器，跨越视口的整个宽度。
因此，您应该将第一个div课程从container更改为container-fluid。