html - Bootstrap 列在 IE 和边缘中工作(列并排显示),但在 chrome 中不起作用(列垂直堆叠)
问题描述
我刚刚开始使用引导程序学习 Web 开发。
我遇到了一个我不明白的问题。当我在 IE 或 edge 中查看我的项目时,一切看起来都符合预期(并排的列): Internet Explorer vs chrome:
https://i.stack.imgur.com/CWe8Y.png
我检查了这是否是由于屏幕尺寸造成的,但是无论我用 chrome 制作多大的屏幕,这些列仍然垂直堆叠。
index.html 代码:
.customDiv{
margin:3px;
min-height:300px;
background-color:silver;
text-align:center;
font-size:large;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="CustomStyles.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<!--Columns must always be the children of a row class-->
<div class="col-2">
<!--Content must always be inside a col class-->
<div class="customDiv">Column 1</div>
</div>
<div class="col-md-8">
<div class="customDiv">Column 2</div>
</div>
<div class="col-md-2">
<div class="customDiv">Column 3</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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="bootstrap/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
非常感谢任何帮助。一直坚持这个问题,我找不到其他人遇到过这个确切的问题。
解决方案
推荐阅读
- android-studio - 如何让 onclick 方法在 onCreate() 之外工作?
- r - scale_alpha_continuous 对数刻度
- python - 如何从具有某些值的列表的熊猫数据框列中获取行
- excel - 批量电子邮件提取器。需要添加一个Regxp - excel VBA
- python - Python:使用 lxml xpath 从所有 HTML 子元素文本中获取文本
- powershell - 参数化值会导致 powershell/msbuild 命令出错
- mongodb - 嵌入 mongodb 到 spring-boot 应用程序 java 异常
- sql - 在 SQL Server 中将 getdate() 转换为 dd/mm/yyyy
- html - 内容的过渡不起作用
- python - Pandas - 按列分组,然后从结果创建新列