twitter-bootstrap 如何使用“li”标签和 Twitter Bootstrap 创建表结构
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14961472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a table structure using "li" tag and Twitter Bootstrap
提问by Saurabh Kumar
I am creating a table structure using twitter bootstrap
我正在使用 twitter bootstrap 创建一个表结构
<div class="hero-unit span8 pull-right">
<h5><span class="label label-info">General Account Settings</span></h5>
<ul class="nav nav-list">
<c:forEach items="${personUI}" var="entry">
<li id="${entry.key}">
<div class="span2 pull-left">
<span class="label">${entry.key}</span>
</div>
<div class="span2">
<font size="2"><span><strong>${entry.value}</strong></span></font>
</div>
<div class="span2 pull-right">
<font size="2">
<span>
<a href="#" class="${entry.key}">
<span class="add-on">
<i class="icon-pencil"></i>
</span>Edit
</a>
</span>
</font>
</div>
</li>
<li class="divider"></li>
</c:forEach>
</ul>
</div>
But i am trying to put a horizontal line after each li. according to twitter bootstrap it says create a li with class divider to have the line. I do it but than whole structure of the table 
但我试图在每个 li 后放一条水平线。根据 twitter bootstrap，它说创建一个带有类分隔符的 li 以获得该行。我这样做，但不是整个表格结构
回答by Gonzalo
To display forms controls you shouldn't use list or tables.
要显示表单控件，您不应使用列表或表格。
Simply you should use < form > < fieldset > and form controls. To align and display controls properly, Bootstrap provides css classes: "control-group", "control-label", "controls", "input-prepend"
只需使用 <form> <fieldset> 和表单控件。为了正确对齐和显示控件，Bootstrap 提供了 css 类：“control-group”、“control-label”、“controls”、“input-prepend”
To horizontal line you should use < hr >
对于水平线，您应该使用 <hr>
<form class="form-horizontal">
<fielset>
<div class="well">
<legend>General Account Settings</legend>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<div class="input-prepend">
<input id="name" type="text" /> <a href="">
<span class="add-on"><i class="icon-edit"></i> Edit</span>
</a>
</div>
</div>
</div>
<hr class="divider"></hr>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<div class="input-prepend">
<input id="email" type="text" /> <a href="">
<span class="add-on"><i class="icon-edit"></i> Edit</span>
</a>
</div>
</div>
</div>
<hr class="divider"></hr>
</div>
See live example:
见现场示例：
回答by Gonzalo
If you want to display a grid, you should use Boostrap table styles and < table > < thead > < tbody > < th > < tr > and < td >
instead < div > < lu > and < li >
如果你想显示一个网格，你应该使用Boostrap表格样式和<table><thead><tbody><th><tr>和<td>
代替<div><lu>和<li>
http://twitter.github.com/bootstrap/base-css.html#tables
http://twitter.github.com/bootstrap/base-css.html#tables
<table>
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
