twitter-bootstrap - Bootstrap 4. 为什么不在移动设备上使用全宽?
问题描述
好的,所以我准备好被这个问题一笑了之,因为我认为我遗漏了一些非常明显的东西,但我很累,今天是星期六,我宁愿不工作。
我只是将一个项目从 Bootstrap 3 移动到 Bootstrap 4。谁能告诉我为什么以下代码不会在移动(xs)设备上全屏显示?
这是相当标准的BS4
<html>
<head>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- JS, Popper.js, and jQuery -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
This is a test
</div>
<div class="col">
This is a test
</div>
</div>
</div>
</body>
如图所示,我的左侧和右侧都有排水沟.container
。
根据文档,这应该是开箱即用的。我究竟做错了什么?
解决方案
将 container-fluid 用于全屏容器
<html>
<head>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- JS, Popper.js, and jQuery -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
This is a test
</div>
<div class="col">
This is a test
</div>
</div>
</div>
</body>
推荐阅读
- git - 如何在历史记录中更改特别是 git 提交的文件?
- list - Swiftui 中的 Listdata 只在交互后出现
- blazor - 识别服务器端 Blazor 应用程序上的客户端
- java - 你能将 HashMap 的 Keys 与 Set 进行比较吗?
- javascript - 地图加载到地图框中后绘制圆圈
- django - 谷歌云运行无法访问 Cloud SQL
- html - 当 li 元素悬停时,如何更改我想要的地方的颜色?
- php - 如何使用我的邮件的访问令牌查看我的应用程序中的驱动器文件,而无需最终用户使用他们的邮件登录
- asp.net - ASP.net MVC 局部视图默认
- javascript - Webpack HMR 不适用于 `localhost`,仅适用于 `--host=[::1]`