Question

我是网络开发人员的新手，我现在正在使用Twitter Bootstrap。我正在尝试使用以下代码在我的页面上创建3列：

  <div class="container">
   <div class="row">
            <div class="span4">
                <h4 class="muted text-center">About me</h4>
                <p>Sample Text1.</p>
                <a href="#" class="btn"><i class="icon-user"></i> Text1</a>
            </div>
            <div class="span4">
                <h4 class="muted text-center">About you</h4>
                <p>Sample Text2</p>
                <a href="#" class="btn btn-success"><i class="icon-star icon-white"></i> Text2</a>
            </div>
            <div class="span4">
                <h4 class="muted text-center">About Us</h4>
                <p>Sample Text3</p>
                <a href="#" class="btn btn-info">Text3</a>
            </div>
        </div>
</div>

我查看了很多示例并在我的页面上对其进行了测试，但它们似乎无法正常工作。此代码将所有文本一个输出到另一个上面，而不是将其分成同一行中的列。

我是否需要以某种方式更改bootstrap.css文件？默认值不包含span4类或任何内容。

Answer 1

假设您可能已经使用了用于引导程序和语法的库。（发生在我身上一段时间）

从bootstrap 3.0开始... spanX已被弃用，而col-xx-##现在用于xx可以是lg，md，{ {1}}或sm和xs的范围为1到12

所以在上面的html标记中，将#更改为<div class="span4">并且它应该可以正常工作

查看演示here 见 docs here on how to use it

另外，如果您使用<div class="col-xs-6 col-md-4">的2.xx版...我建议您转到此解决方案所基于的最新版本3.0！

Answer 2

我认为您正在使用Bootstrap 3和Bootstrap 2类。在上一版本中网格类名称已更改，请参阅documentation。

span4类不能与twitter bootstrap一起使用

2 个答案: