Question

我有以下页面正确显示，TOP BAR占据整个顶部空间，另外3个div显示在彼此旁边。

然而，在Chrome上，无论浏览器的大小如何，它都会将所有内容叠加在一起。有什么想法吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Whatever</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

</head>
<body>
    <h1>Hello!</h1>

    <div class="container">
        <div class="row">
        <div class="col-xs-12">
            TOP BAR
        </div>
        </div>
        <div class="row">
        <div class="col-sm-4">
            I am left
        </div>
        <div class="col-sm-4">
            I am center
        </div>
        <div class="col-sm-4">
            I am right
        </div>
        </div>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</body>
</html>

为了重现这一点，请使用integrity约束链接到引导程序文件。

Answer 1

感谢Jdsfighter在打开console后的评论，我发现了以下错误：

无法在“完整性”中找到有效的摘要＆＃39;属性   资源   ＆＃39; https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css＆＃39;   具有计算的SHA-256完整性   ＆＃39; 7s5uDGW3AHqw6xtJmNNtr + OBRJUlgkNJEo78P4b0yRw =＆＃39 ;.资源已经   阻止。

无法在“完整性”中找到有效的摘要＆＃39;属性   资源   ＆＃39; https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js＆＃39;   具有计算的SHA-256完整性   ＆＃39; KXn5puMvxCw + dAYznun + drMdG1IFl3agK0p / pqT9KAo =＆＃39 ;.资源已经   阻止。

出于某种原因，完整性检查不适用于我的Chrome实例，因此我必须删除它们。

为什么Bootstrap网格在Chrome中堆叠其列？

1 个答案: