我正在使用引导程序,我的容器流体内的列垂直堆叠而不是拉伸以水平填充所有空间



我正在关注这个视频,由'thenewboston'https://youtu.be/c5xVxSFoyQw?list=PL6gx4Cwl9DGBPw1sFodruZUPheWVKchlM

我的代码响应与视频中的响应不同,我不知道为什么。我正在浏览纽波士顿引导播放列表,我不敢相信我被困在第二个视频上。

这里有一个链接到我在 GitHub 中的代码 https://github.com/Osyris93/BootstrapProject 如果你想继续帮助我,或者只是在我完成这个播放列表时关注我。

<!DOCTYPE html>
<html lang="en">
<head>
<title>The bootstrap project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.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>
</head>
<body>
<div class="container-fluid>
<h1>3 column layout</h1>
<div class="row">
<div class="col-md-4" style="background-color: #FF9999">Left</div>
<div class="col-md-4" style="background-color: #99CCFF">Middle</div>
<div class="col-md-4" style="background-color: #00CC99">Right</div>
</div>
</div>
</body>
</html>

欢迎来到堆栈溢出!您看到的问题是因为容器类后缺少结束引号。要修复,只需切换:

<div class="container-fluid>

对此:

<div class="container-fluid">

拼写错误是开发中常见的部分,我一直发现使用具有上下文突出显示的工具可以节省您因缺少一个字符而感到沮丧的时间。

最新更新