0

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

但我试图在每个 li 之后放置一条水平线。根据 twitter bootstrap，它说创建一个带有类分隔符的 li 以拥有这条线。我这样做，但比桌子的整个结构在此处输入图像描述

4

2 回答 2

1

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

简单地说，您应该使用 <form> <fieldset> 和表单控件。为了正确对齐和显示控件，Bootstrap 提供了 css 类：“control-group”、“control-label”、“controls”、“input-prepend”

对于水平线，您应该使用 < 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>

在此处输入图像描述

查看实时示例：

http://jsfiddle.net/udNYq/

于 2013-02-20T02:13:38.290 回答
0

如果要显示网格，应该使用Boostrap表格样式和<table><thead><tbody><th><tr>和<td>
代替<div><lu>和<li>

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>
于 2013-02-19T15:51:42.150 回答