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

Question

我正在使用Twitter Bootstrap，当他们进入手风琴时，我很难将一些图标与标签对齐。

到目前为止我所获得的内容在下面提供，但我希望左边的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>

Answer 1

使用方法如下：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;
}