Fatal编程技术网

Twitter bootstrap Can'；t使用Twitter引导创建列

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap Can'；t使用Twitter引导创建列,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我想学习Bootstrap。我现在发现了网格系统的问题。我无法在行中创建列 此示例代码应该可以工作，但我没有让它工作： <!DOCTYPE html> <html> <head> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="contain

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



    

  • 

    • 


身份证件
名称
电子邮件
100001
乔
100
克里斯汀
以下是我的浏览器上显示的结果：

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

结果应该类似于一张桌子

我的代码怎么了？谢谢大家!

您需要添加引导js和引导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">
之所以发生这种情况，是因为您在引导3中使用了2.x CSS类名（即；
span*
）。 查看从2.x到3的更改列表：

使用位于的升级工具，我将您的标记更改为

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



    

  • 

    • 


身份证件
名称
电子邮件
100001
乔
MamiePVillalobos@teleworm.us
100
克里斯汀
ChristineJWilliams@dayrep.com
Bootply上的演示：

谢谢！我试过了，也试过了。但它的工作没有js太多。我只添加了一个表，现在该表可见。但我不明白为什么它不与。。bootstrap.css位于css文件夹中，t引导选项卡显示正确，但列显示不正确。。你知道为什么吗。。曾农，我用过，效果很好。可能是css源文件，您在css文件夹中的那个，有一些问题。您可以打开我在选项卡中给出的链接，然后“另存为”文件并使用该文件。现在应该可以了。谢谢：）是的。。我的js文件夹中有旧版本的bootstrap。这就是问题所在。谢谢你，普拉瓦！