如何使用Twitter的引导

Question

我使用Twitter的引导，我有一个很难用标签对准一些图标时，他们是一个手风琴内对齐手风琴图标和标签。

我到目前为止所取得的成果在下面提供，但我希望左侧的3个图标等距，标签在右侧。

此外，我想在显示collapseOne时将第一个图标（图标 - 雪佛龙 - 向下）更改为（图标 - 雪佛龙向上）。

下面是一些演示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; 
}