Question

我正在尝试使用Bootstrap;我正在下载从Bootstrap网站构建的示例页面。但是，当我启动它们时，它们在我的Chrome浏览器中看起来很糟糕。

例如，当我加载缩小的jumbotron页面时，jumbotron跨越整个屏幕......我做错了什么？我在文件夹中包含了我已保存narrow-jumbotron.html页面的css，js和font文件夹。

非常感谢任何帮助。

Answer 1

请检查css和其他文件的源URL或路径。可能这会产生问题。

Answer 2

首先确保您已下载bootstrap.min.css和jumbotron-narrow.css。将它们放在您拥有html文件的文件夹中。

之后在你的html文件中找到以下两个语句。

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">

用这些行替换它们：

 <link href="bootstrap.min.css" rel="stylesheet">
 <link href="jumbotron-narrow.css" rel="stylesheet">

Answer 3

看起来这可能是路径问题。下载原始引导框架时，您将拥有/ css和/ js目录。您的新html文件如何访问这些位置取决于您放置这些目录的位置。我假设你有一些自举测试区域。让我们把它称为主引导区域或核心文件区域，无论如何。

设置完成后，您可能会返回其他下载内容，其中包含/ examples目录。其中的文件设置为处理少量目录级别。当你进入/ examples目录文件夹时，你是否复制了整个/ examples分支？或者只是一组示例文件？

让我们尝试这只是为了试图让事情发挥作用的一个例子。如果你想弄乱目录/文件夹组织和文件路径，那么一旦你工作了，那很好。

找到examples / theme目录，无论你把它放在哪里。在此/ theme目录中将index.html重命名为theme.html
从/ examples / theme目录中取出theme.html和theme.css，并将它们放在bootstrap的root index.html文件所在的根目录中。现在，您的CSS文件的文件路径应该设置为与index.html文件正在进行的操作相匹配。
进入theme.html文件，按照前面的建议查找带有../../dist/css/的行。
但是让它们看起来像这样......“css / bootstrap-theme.min.css”
现在应该从正确的位置调用这些文件。仅这一点对你有用。
但仍有一个问题。你会在theme.html文件中看到一个链接“../../ assets / js / ie-emulation-modes-warning.js”
你可以忽略这一点，但要真正把事情整理好，你需要把这条道路弄好。所以，去找你原来的示例下载，并将整个/ assets文件夹和子文件夹复制到你的bootstrap root的任何地方;即/ assets应与/ css和/ js处于同一级别。
再一次，将链接修改为“assets / js / ie-emulation-modes-warning.js”

这有望让您前进，并清楚明白地了解文件路径的工作原理。如果您喜欢前进，请将内容放入更好的目录/文件夹结构中并重新执行路径。请记住，如果您想要在真实的Web服务器上（本地或远程），您始终可以使用根目录中的虚拟路径，这样您就不必跟踪这些文件的每个位置的级别。

无论如何，我只是测试了这个，理想情况下它也适合你。

Answer 4

例如，将bootstrap.min.css和bootstrap.min.js放在与传送带文件夹相同的文件夹中。

然后将js文件的路径修复为此：

<script src="bootstrap.min.js"></script>

然后将css文件的路径固定为此：

<link href="bootstrap.min.css" rel="stylesheet">

Answer 5

尝试删除“完整性”部分

代替此：

<link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

制作：

<link href="css/bootstrap.min.css" rel="stylesheet">

作为完整性属性，检查代码是否已更改。这可能会有帮助。

Bootstrap示例页面无效

5 个答案: