如何使用“li”标签和Twitter Bootstrap创建表结构

Question

我正在使用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>

但是我想在每个李之后放一条水平线。根据twitter bootstrap，它说创建一个带有类分隔符的li来拥有该行。我这样做，但比表

的整个结构

Answer 1

要显示表单控件，不应使用列表或表。

只需使用＆lt;形式＆gt; ＆LT; fieldset＆gt;和表单控件。 为了正确对齐和显示控件，Bootstrap提供了css类：“control-group”，“control-label”，“controls”，“input-prepend”

要水平线，你应该使用＆lt; hr＆gt;

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

查看实时示例：

http://jsfiddle.net/udNYq/

Answer 2

如果要显示网格，则应使用Boostrap表样式和＆lt;表＆gt; ＆LT; thead＆gt; ＆LT; tbody＆gt; ＆LT; th> ＆LT; tr>和＆lt; td＆gt;
相反＆lt; div> ＆LT; lu>和＆lt; li＆gt;

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>