为什么我的CSS引导不工作在Codesandbox?



我在Codesandbox的代码编辑器中使用了一些Bootstrap,但它不起作用,所以我的图像看起来凌乱和超大。我怎样才能在我的Codesandbox中使用Bootstrap ?如果有人知道,请帮助我!非常感谢!

这是我的Codesandbox: https://codesandbox.io/s/why-cant-i-fetch-data-from-a-passed-value-forked-30bgi?file=/src/index.js

只需将以下Bootstrap CDN链接添加到公共/index.html文件的头标签

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
crossorigin="anonymous">

经过了漫长的一年,它仍然不工作.

但是当你简单地通过CDN链接添加你的bootstrap

在根目录(index.html)中添加任意一个

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

或者——在

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

这也可以通过将bootstrap作为codesandboximport "bootstrap/dist/css/bootstrap.min.css";的依赖项添加到App.jssrc/index.js来解决(由于CSS的级联性质,确保在任何其他样式表之后导入)。

在codesandbox中使用react-bootstrap的实例中,有必要将bootstrapreact-bootstrap作为依赖项,并像上面那样导入样式表。

react-bootstrap文档对此有详细的解释。

最新更新