Jquery 如何使用Twitter引导在手风琴中对齐图标和标签

我使用的是推特引导，当一些图标在手风琴内时，我很难将它们和标签对齐

到目前为止，我所取得的成就如下所示，但我希望左侧的3个图标间距相等，右侧的标签相同

另外，我想在显示折叠图标时将第一个图标（图标V形向下）更改为（图标V形向上）

以下是一些演示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>

链接1
这是链接1
链接2
这是链接2
链接3
这是链接1

简洁的使用方法如下：Jsfiddle

---

可以我会试着看看。但是我改变了演示，遇到了另一个问题。是的，文本问题。如果文本是连续的，它不尊重边界。而且我的a文本（在你的例子中是标题）是可变宽度的，所以要有一个好的外观和感觉，我希望所有3个图标都在最右边，如果文本超过一定长度，我会放一些类似标题的东西。关于如何实现这一点，你有什么想法吗？是的，你可以使用文本溢出：标题用省略号，这样，如果文本比预期的长，点就会可见YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY。有什么想法吗？您必须使用text-overflow:省略号属性，我已经为此更新了JSFIDLE。Plz检查

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

.accordion-heading > a {
width:8em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.accordion-heading > span {
margin-right:20px;
margin-top:-28px;
}