Question

我现在正在学习.html，这实际上是我第一次尝试某些事情。我已经按照书中的一个例子来说它应该可以工作。

但是，在运行页面时，结果会有所不同。

这是我的<!DOCTYPE html> <html lang="en"> <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>Bootstrap Grid System</title> <link rel="styleheet" type="text/css" href="css/bootstrap.css"/>  </head> <body> <script src="js/jquery-1.11.3.js" type="text/javascript"></script> <script src="js/bootstrap.js" type="text/javascript"></script> <div class="container"> <div class="row"> <div class="col-xs-6"> <h4>Column 1</h4> </div> <div class="col-xs-6"> <h4>Column 2</h4> </div> </div> </div> </body> </html>页面：

{{1}}

它应该在左侧和右侧生成2列：

但它会产生以下结果：

我不确定为什么？有什么想法吗？

Answer 1

我根据这个链接尝试了：http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php

似乎更好。如果您通过示例查看控制台，它会告诉您＆＃34; bootstrap的js需要jquery＆＃34;

我尝试了这样，它更好：

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <h4>Column 1</h4>
        </div>
        <div class="col-xs-6">
            <h4>Column 2</h4>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

{{1}}

也许是关于jquery版本的。尝试一下

Answer 2

使用firebug或类似的开发人员工具检查，如果您的文件（css / bootstrap.css，js / bootstrap.js）位于您的文件夹中，并且它们已“包含”在您的html中。

您也可以使用Bootstrap CDN，以确保加载了css和js。

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

Answer 3

似乎您的bootstrap javascript文件未加载。尝试将其更改为：

<head>   
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

Bootstrap：页面无法正确加载

3 个答案: