Twitter Bootstrap 行 div 不起作用答案

【问题标题】：Twitter Bootstrap row divs don't workTwitter Bootstrap 行 div 不起作用
【发布时间】：2014-01-20 07:26:55
【问题描述】：

我正在尝试使用 Twitter Bootstrap 在我的网站上创建两列，按照下面的代码划分行 div 类。

问题是语法在我的计算机上似乎与在文档站点上的工作方式不同。例如，如果我复制 example page 的源代码，它将完全不同，池和活动菜单项显示不正确，并且列作为段落放在彼此下方。

我也找不到 webkit 检查器的任何线索，代码和文件结构和编码与教程示例站点的相同。

有人有什么想法吗？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title comes here</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="span4">
                <p>Dummy Text</p>
             </div>

             <div class="span8">
                <p>Dummy Text</p>
                 </div>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

您使用的是哪个版本的引导程序？
由于屏幕尺寸较小，您确定它不只是像预期的那样级联吗？
你的代码是looks fine to me in this example。您可能使用 Bootstrap 2 从文档站点复制代码，但实际上自己下载了 Bootstrap 3。

标签： css html twitter-bootstrap row

【解决方案1】：

您使用的是较新版本的 Bootstrap (3.X)。您的示例中使用的是 2.3.2。网格系统已完全重建，以更好地支持响应能力。

http://getbootstrap.com/css/#grid-example-basic

您应该使用 col-xs-X、col-sm-X 或 col-md-X 或 col-lg-X，而不是 spanX X 为列数。 xs,sm,md 和 lg 取决于您要支持的屏幕尺寸。

【讨论】：

【解决方案2】：

您需要在列中添加不同的类：

<div class="col-md-6">
    <p>Dummy text</p>
</div>

根据代码支持的设备大小选择md 部分（md 是中等大小，lg 也用于大型台式机，sm 用于平板电脑xs 和智能手机）

这适用于 Bootstrap 版本 v3.0.3

【讨论】：

看起来他使用的是 Bootstrap 2.3.2 版，所以这无济于事。