2

ここに画像の説明を入力してください

私はTwitterBootstrapを使用していますが、アコーディオン内にあるアイコンをラベルに合わせるのに苦労しています。

これまでに達成したことを以下に示しますが、左側に等間隔の3つのアイコン、右側にラベルが必要でした。

また、collapseOneが表示されているときに、最初のアイコン（icon-chevron-down）を（icon-chevron-up）に変更したいと思います。

ここにいくつかのデモhtmlがあります：

    <div class="accordion" id="accordion2">
        <div class="accordion-group">  
          <div class="accordion-heading">
          <table>  
            <tr>
              <td>
                 <div class="clearfix"></div>
              </td>
              <td>
                 <label title="link ![enter image description here][2]1">link1</label>
              </td>
              <td>
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"><i class="icon-chevron-down"></i></a>
              </td>
              <td>  
                <a href="#"><i class="icon-edit"></i></a>
              </td>
              <td>
                <a href="#"><i class="icon-trash"></i></a>
              </td>
             <tr>
            </table>
          </div>  
          <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">  
            <div class="accordion-inner">  
              This is link 1
            </div>  
          </div>
        </div>
        <div class="accordion-group">  
          <div class="accordion-heading">
          <table>  
            <tr>
              <td>
                 <div class="clearfix"></div>
              </td>
              <td>
                 <label title="link 2">link2</label>
              </td>
              <td>
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"><i class="icon-chevron-down"></i></a>
              </td>
              <td>  
                <a href="#"><i class="icon-edit"></i></a>
              </td>
              <td>
                <a href="#"><i class="icon-trash"></i></a>
              </td>
             <tr>
            </table>
          </div>  
          <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">  
            <div class="accordion-inner">  
              This is link 2
            </div>  
          </div>
        </div>
        <div class="accordion-group">  
          <div class="accordion-heading">
          <table>  
            <tr>
              <td>
                 <div class="clearfix"></div>
              </td>
              <td>
                 <label title="link 3">link3</label>
              </td>
              <td>
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"><i class="icon-chevron-down"></i></a>
              </td>
              <td>  
                <a href="#"><i class="icon-edit"></i></a>
              </td>
              <td>
                <a href="#"><i class="icon-trash"></i></a>
              </td>
             <tr>
            </table>
          </div>  
          <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">  
            <div class="accordion-inner">  
              This is link 1
            </div>  
          </div>
        </div>
      </div>
4

1 に答える 1

3

きちんとした使い方は以下のようになります：Jsfiddle Demo

<div class="accordion-heading">
 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseOne"><i class="icon-home"></i> Heading <i class="icon-chevron-down"></i>   <i class="icon-edit"></i><i class="icon-trash"></i></a>
</div>

アイコンを右に引っ張るには（コメントに従って）、次のようにすることができます：

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseOne"><i class="icon-home"></i> Heading<span class="pull-right"><i class=" icon-chevron-up"></i> <i class="icon-edit "></i><i class="icon-trash"></i></span></a>

コメントで述べたように、見出しは可変長です。タグからスパンを外してください。以下を参照してください。

 <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
        href="#collapseOne"><i class="icon-home"></i> Headinghjhkjhjkhkjhkjhkjhkjhkjhkjhjkhkjhjkhkjhjkhjk</a>
  <span class="ico-pull pull-right"><i class=" icon-chevron-up"></i>  <i class="icon-edit "></i><i class="icon-trash"></i>
            </span>
    </div>

次のcssを使用するよりも：

.accordion-heading > a {
width:8em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.accordion-heading > span {
margin-right:20px;
margin-top:-28px;
}
于 2013-03-02T03:42:15.410 に答える