Bouton cliquable ou glyphicon dans list-group-item

Droit maintenant, je suis en train d'insérer une glyphicon ou un bouton dans une list-group-item. Ce que je veux, c'est que lorsque l'utilisateur clique n'importe où dans la list-group-item, ils sont liés à une certaine page, mais quand ils cliquent sur le glyphicon ou le bouton, il lien vers une autre page. Pourquoi j'essaie de faire cela, il continue de mettre la glyphicon bouton ou à l'extérieur de la list-group-les éléments de la boîte. Pourquoi est-ce? Comment puis-je résoudre ce problème?

Beaucoup apprécié.

Code:

<div class="list-group">
            <a href="my_django_url" class="list-group-item">
                            <a href="another_django_url"><span class="glyphicon some-glyphicon"></span></a>
            </a>

OriginalL'auteur steve-o | 2014-11-23

  1. 6

    ici, vous allez:

    <div class="list-group">
    <li class="list-group-item">
        <a href="my_django_url">
           first link
        </a>
        <a href="another_django_url" class="icon">
            <span class="glyphicon glyphicon glyphicon-search"></span>
        </a>
    </li>
</div>

.icon {
    float: right;
}

    violon: http://jsfiddle.net/9r14uuLw/

    OriginalL'auteur ncosta

  2. 3

    Pardon la brièveté (au travail /claqué):

    C'est ce que je vais aller avec le reste de mon projet(s)...

    <div class="list-group-item row" ng-repeat="item in list.items">
    <a class="col-xs-6 col-sm-8 col-md-10 col-lg-10 pull-left" href="#/lists/{{list.id}}/items/{{item.id}}"><h5>{{item.name}} ({{item.quantity}})</h5></a>
    <h5 class="col-xs-6 col-sm-4 col-md-2 col-lg-2 pull-right">
        <a class="pull-left" href="#/lists/{{list.id}}/items/{{item.id}}/edit" ng-show="list.name !== 'all-deleted-items'"><u>Edit</u></a>
        <a class="pull-right" href="" ng-click="removeItem(item, $event)" ng-show="list.name !== 'all-deleted-items'"><u>Remove Item</u></a>
    </h5>
</div>

    Ce travail est le code de mon projet, mes excuses pour le brut de Copier/Coller! La baisse des <h5> est simplement pour l'alignement vertical. Le row classe ajoutée à div.list-group-item est de prendre un emploi à plein conteneur largeur (en option).

    #mise en garde:

    Pas la totalité de la hauteur est passible de poursuites en tant que lien, mais cela peut être un décent compromis.

    Espérons que cette aide!

    OriginalL'auteur Cody

  3. 1

    Il semble que vous voulez l'ensemble de la list-group-item à un lien, ce qui n'est pas accompli par la réponse fournie. Vous ne pouvez pas avoir un <a> balise à l'intérieur d'un autre <a> tag, donc je pense que vous avez besoin d'utiliser le positionnement absolu pour accomplir ce que vous essayez de faire.

    <div class="list-group-item" style="padding: 0;">
    <a href="#" style="display: block; padding: 10px 15px;">test</a>
    <a href="#" class="btn btn-sm btn-danger" style="position: absolute; top: 50%; right: 15px; margin-top: -15px;">hi</a>
</div>

    Qui devrait être proche de ce que vous êtes après. Je viens d'ajouter quelques styles en ligne pour rapidement vous montrer comment il peut être fait, mais vous aurez probablement envie de venir avec un peu plus de styles génériques pour le réutiliser facilement.

    OriginalL'auteur dvanderb