Question

我正在尝试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>

Answer 1

您已经说过您正在使用v3.1.1。问题是v3不再使用spanX，它使用col-md-X / col-sm-X / col-xs-X等。the v3 docs和{{3 }}

因此，如果您将span4课程更改为（比方说）col-md-4，则应该进行跨越。

请注意，如果视口太小，单元格仍会堆叠;这是各种不同列类的用途。例如，使用浏览器以各种宽度（the migration guide）查看此内容：

<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>

你会看到，当你使视口变窄时，大的视频会先堆叠;然后，如果你继续前进媒体堆栈;然后是小人物等。

Bootstrap跨度不起作用

1 个答案: