Avr*_*dis 2 javascript twitter-bootstrap angularjs
我正在尝试Bootstrap并且我有以下html,Chrome控制台上没有错误但引导跨度不起作用.我错过了什么吗？
<!DOCTYPE html>
<html ng-app="myApp">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style type="text/css" src="css/bootstrap.min.css"></style>
<style type="text/css" src="css/app.css"></style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<h2>Column one</h2>
<p>
Something
</p>
</div>
<div class="span4">
<h2>Column one</h2>
<p>
Something else
</p>
</div>
<div class="span4">
<h2>Column one</h2>
<p>
Something different
</p>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/Controllers/EventController.js"></script>
</html>
你说过你正在使用v3.1.1.问题是,V3没有使用spanX了,它使用col-md-X/ col-sm-X/ col-xs-X在等更多的V3文档和迁移指南.
所以如果你把你的span4班级改为(比如说)col-md-4,你应该得到跨越.
请注意,如果视口太小,单元格仍会堆叠; 这就是各种不同列类的用途.例如,使用您的浏览器以各种宽度(实时副本)查看此信息:
<div class="container">
<div class="row">
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
</div>
你会看到,当你使视口更窄时,大的视频会先堆叠; 然后,如果你继续前进媒体堆栈; 然后是小人物等