为什么Bootstrap无法与Chrome一起使用

时间:2019-05-26 02:00:18

标签: twitter-bootstrap bootstrap-4

我是网络开发和前端的新手,我下载了bootstrap并放入了一些代码对其进行测试,使其可以在Firefox中正常工作,但在chrome中则无法工作,因此它看起来像非样式的html代码,因此,如果有解决方案

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>
	
<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

</body>
</html>

chrome中的结果

enter image description here

1 个答案:

答案 0 :(得分:0)

这是CORS问题。 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

由于要从HTML文件所在的同一来源加载CSS和JavaScript文件,因此需要在integrity和{{1}中省略crossorigin<link>属性}标签。

<script>