引导跨度不起作用答案

【问题标题】：Bootstrap span is not working引导跨度不起作用
【发布时间】：2014-03-12 09:49:55
【问题描述】：

我正在尝试引导程序并且我有以下 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 不再使用spanX，而是使用col-md-X / col-sm-X / col-xs-X 等。
@KarthickKumarGanesh 不是按水平顺序排列 3 列，而是一列在另一列之上。
@T.J.Crowder 可能是问题所在，我使用的是 v3.1.1
@T.J.Crowder 但是他会如何选择使用哪个呢？他的网站可以在许多设备上运行。使用 spanX ，您可以通过 12 个部分来区分。而现在——他将如何划分它？ (md / sm / xs ) ?关键是css应该自动使用除法。我错过了什么？
@ShibinRagh 是的，问题是我使用的是最新版本，而 span 不再使用了

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

您说您使用的是 v3.1.1。问题是 v3 不再使用spanX，它使用col-md-X / col-sm-X / col-xs-X 等。更多内容请参见the v3 docs 和the migration guide。

因此，如果您将 span4 类更改为（例如）col-md-4，您应该会获得跨越。

请注意，如果视口太小，单元格仍会堆叠；这就是各种不同的列类的用途。例如，在不同宽度的浏览器中查看此内容 (live copy)：

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

您会看到，当您缩小视口时，大的会首先堆叠；然后，如果您继续使用介质堆栈；然后是小东西等。

【讨论】：

我做了那个改变但仍然没有工作，现在似乎还有另一个问题。我编辑了我的帖子。
@Avraam：如果视口太窄，它们会堆叠。如果col-md-X 不适合你，你可以考虑col-sm-X 或col-xs-X。