gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 08:36:54 24 4
gpt4 key购买 nike

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

关于twitter-bootstrap - 无法使用 Twitter Bootstrap 创建列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18204805/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com