使Bootstrap列占据整个页面宽度（或至少90％）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使Bootstrap列占据整个页面宽度（或至少90％）相关的知识，希望对你有一定的参考价值。
我正在为一个班级做最后的项目，只是在学习如何使用引导程序。虽然我对html等具有一定的工作知识（或者如果卡住了也知道了去向），但我一生中无法弄清的一件事是如何使引导程序列占据更多的屏幕。我已经复制并粘贴了以下相关代码，希望有人可以告诉我我做错了什么，或者甚至可以解决此问题！
我一直在看其他松弛的帖子（抱歉，我忘了复制链接，对不起！）和w3schools website，但仍然有相同的问题。
<nav class="navbar navbar-expand-sm bg-white navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Papers</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<! –– The columns still aren't taking up 100% of the screen width. ––>
<div class="col-sm-2">
<! –– Ideally more to the left ––>
Welcome the user to the website here
</div>
<div class="col-sm-4">
Brief bit of information about me
</div>
<div class="col-sm-6">
Image carosel (idk how to spell) with images of me, my friends & family
</div>
</div>
</div>
答案
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm bg-white navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Papers</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<! –– The columns still aren't taking up 100% of the screen width. ––>
<div class="col-sm-2">
<! –– Ideally more to the left ––>
Welcome the user to the website here
</div>
<div class="col-sm-4">
Brief bit of information about me
</div>
<div class="col-sm-5">
Image carosel (idk how to spell) with images of me, my friends & family
</div>
</div>
</div>以上是关于使Bootstrap列占据整个页面宽度（或至少90％）的主要内容，如果未能解决你的问题，请参考以下文章