4

我想学习引导程序。我现在对网格系统有问题。我无法在行中创建列。

此示例代码应该可以工作，但我没有让它工作：

<!DOCTYPE html>
    <html>
        <head>

        <link href="css/bootstrap.css" rel="stylesheet">

    </head>
    <body>
        <div class="container">
                <ul class="nav nav-pills">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>

                </ul>
            <div class="row">
                <div class="span2">
                    ID
                </div>
                <div class="span2">
                    Name
                </div>
                <div class="span8">
                    E-Mail
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    100001
                </div>
                <div class="span2">
                    Joe
                </div>
                <div class="span8">
                    <replacedEmail@nowhere.com>
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    100
                </div>
                <div class="span2">
                    Christine
                </div>
                <div class="span8">
                    <replacedEmail@nowhere.com>
                </div>
            </div>

        </div>

    </body>
</html>

以下是我的浏览器上显示的结果：

![此处应有图片，但其中包含个人电子邮件地址][1]

结果应该类似于表格。

我的代码有什么问题？谢谢！

4

2 回答 2

1

发生这种情况是因为您在span*Bootstrap 3 中使用 2.x CSS 类名（即；）。查看从 2.x 到 3 的更改列表：http: //bootply.com/migrate-to-bootstrap- 3

使用位于http://upgrade-bootstrap.bootply.com/的升级工具，我将您的标记更改为...

<div class="container">
        <ul class="nav nav-pills">
            <li class="active">
                <a href="#">Home</a>
            </li>

        </ul>
    <div class="row">
        <div class="col-lg-2">
            ID
        </div>
        <div class="col-lg-2">
            Name
        </div>
        <div class="col-lg-8">
            E-Mail
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2">
            100001
        </div>
        <div class="col-lg-2">
            Joe
        </div>
        <div class="col-lg-8">
            MamiePVillalobos@teleworm.us
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2">
            100
        </div>
        <div class="col-lg-2">
            Christine
        </div>
        <div class="col-lg-8">
            ChristineJWilliams@dayrep.com
        </div>
    </div>
</div>

Bootply 演示：http: //bootply.com/73851

于 2013-08-13T10:08:37.733 回答
0

您需要添加 Bootstrap js 和 Bootstrap CSS 才能以表格形式查看。将以下行添加到代码的标题部分。

<script src="http://www.w3resource.com/twitter-bootstrap/bootstrap/js/bootstrap.min.js"></script>
<link href="http://www.w3resource.com/twitter-bootstrap/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
于 2013-08-13T09:33:30.140 回答