0

twitterブートストラップを使用してテーブル構造を作成しています

    <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を作成すると言います。私はそれをしますが、テーブルの全体的な構造よりもここに画像の説明を入力してください

4

2 に答える 2

1

フォームコントロールを表示するには、リストやテーブルを使用しないでください。

単に<フォーム><フィールドセット>とフォームコントロールを使用する必要があります。コントロールを適切に配置および表示するために、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


グリッドを表示する場合は、代わりに<div><lu>および<li>の代わりにBoostrapテーブルスタイルおよび<table><thead> <tbody><th><tr>および<td>を使用する必要があります。

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 に答える