twitter-bootstrap – 无法使用Twitter Bootstrap创建列

发布时间：2020-12-17 21:24:06 所属栏目：安全来源：网络整理

导读：我想学习Bootstrap.我现在有网格系统的问题.我无法在行中创建列. 这个示例代码应该工作,但我没有让它工作： !DOCTYPE html html head link href="css/bootstrap.css" rel="stylesheet" /head body div class="container" ul class="nav nav-pills" li class=

我想学习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]

结果应该像桌子一样.

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

解决方法

发生这种情况是因为你使用了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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!