Question

我想学习Bootstrap。我现在有网格系统的问题。我无法在行中创建列。

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

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

结果应该像桌子一样。

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

Answer 1

这种情况正在发生，因为你在Bootstrap 3中使用了2.x CSS类名（即; span*）。查看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

Answer 2

您需要添加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">

无法使用Twitter Bootstrap创建列

2 个答案: