Question

我正在尝试使用Twitter Bootstrap在我的网站上创建两列，将行div类除以下面的代码。

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

我无法找到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>

Answer 1

看起来您使用的是较新版本的Bootstrap（3.X）。您的示例中使用的是2.3.2。网格系统完全重建，以更好地支持响应。

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

而不是spanX，你应该使用col-xs-X，col-sm-X或col-md-X或col-lg-X 用X表示列数。 xs，sm，md和lg取决于您要支持的屏幕大小。

Answer 2

您需要在列中添加其他类：

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

根据代码支持的设备大小选择md部分，md为中等，大型桌面也使用lg，平板电脑sm xs和智能手机）

这适用于Bootstrap版本v3.0.3

Twitter Bootstrap行div不起作用

2 个答案: