Question

这是一个有趣的问题。

我已开始在Pluralsight上进行AngularJS培训。我一开始还差不多，所以它仍然只是基础，创建一个控制器，将数据从$ scope传递到视图和类似的东西。我遇到的一个问题是Bootstrap CSS无效。样式表的路径都很好，当我在Chrome中打开F12时，它显示CSS和其他脚本已正确加载，但类不适用于某些元素（span4，navbar等）。实际上，没有一种风格规则适用。

这是标记：

<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
    <meta charset="utf-8" />
    <title>Event Registration</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <div class="navbar">
            <div class="navbar inner">
                <ul class="nav"></ul>
            </div>
        </div>
        <div>
            <div class="row">
                <div class="span12">
                    <h2>{{event.name}}</h2>
                </div>
            </div>
            <div class="row">
                <div class="span3">
                    <div><strong>Date:</strong> {{event.date}}</div>
                    <div><strong>Time:</strong> {{event.time}}</div>
                </div>
                <div class="span4">
                    <address>
                        <strong>Address: </strong><br />
                        {{event.location.address}}<br />
                        {{event.location.city}}, {{event.location.province}}
                    </address>
                </div>
            </div>
        </div>
    </div>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/bootstrap.min.js"></script>    
    <script src="lib/angular/angular.js"></script>
    <script src="js/app.js"></script>
    <script src="js/Controllers/EventController.js"></script>
</body>
</html>

顺便说一下，我正在使用Visual Studio，我甚至试图提供完整的CSS路径，但它无法正常工作。我试图在其他文本编辑器中创建相同的页面，我试图删除对Angular的任何引用，但没有运气。

Answer 1

Bootstrap 3中不再存在span*类。请改用col-*类。

Bootstrap 2.x to 3 migraton guide

使用你的代码在Bootstrap 3中看起来更像是这样..

http://www.bootply.com/122529

Bootstrap 3.1.1 CSS无法正常工作

1 个答案: