Comment aligner les icônes et les étiquettes dans un accordéon en utilisant Twitter Bootstrap

Question

J'utilise Twitter Bootstrap et j'ai du mal à aligner certaines icônes avec des étiquettes lorsqu'elles sont à l'intérieur d'un accordéon.

Ce que j'ai réalisé jusqu'à présent est fourni ci-dessous, mais je voulais les 3 icônes à gauche avec un espacement égal et l'étiquette à droite.

De plus, je veux changer la première icône (icône-chevron vers le bas) en (icône-chevron vers le haut) lorsque le collapseOne est affiché.

Voici une démonstration en 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

La façon la plus simple de l'utiliser est la suivante : 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>

Pour tirer les icônes vers la droite (comme indiqué dans votre commentaire), vous pouvez procéder comme suit :

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

Comme vous l'avez mentionné dans votre commentaire, vos titres sont de longueur variable, mettez la portée hors de la balise a, voir ci-dessous :

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

Ensuite, utilisez le code suivant :

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