Icône à gauche de l'alerte Bootstrap

Je suis en train de mettre un glyphicon sur le côté gauche d'une alerte div. Lorsque l'alerte de texte est plus d'une ligne, je veux la nouvelle ligne de départ où la première ligne du texte a commencé, plutôt que sous la glyphicon.

Si je utiliser des divs pour l'icône et le message, l'icône se trouve sur le dessus du message. Si j'utilise les travées, le message qui suit l'icône et de l'enveloppe sous.

Assumer les glyphicon la largeur n'est pas connu à l'avance, en utilisant les ::first-line sélecteur n'est pas viable sans quelque chose de plus intelligent que moi aussi, je ne veux pas mettre la glyphicon dans un .col-* parce que .col-*-1 est beaucoup trop grande. .pull-left et .pull-right n'ont pas semblé avoir un effet, indépendamment du fait que j'utilise un div ou un span pour le glyphicon et message.

La solution la plus simple est d'utiliser un tableau (le gasp!), mais je vais essayer de les éviter.

Je suis toujours aussi décider si je veux l'icône en haut à gauche ou milieu gauche de l'alerte. Même avec une table, j'ai eu de la difficulté à centrage de l'icône à la verticale.

Ce que j'ai (assez simple):

<div class="col-sm-9 col-md-10">
    <div class="col-xs-12 alert alert-warning">
        <div class="glyphicon glyphicon-exclamation-sign"></div>
        <div>My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!</div>
    </div>
<div>

Lien vers JSFiddle

Des idées?

source d'informationauteur dfoverdx

  1. 21

    Essayez d'ajouter ceci dans votre CSS (vous devrez peut-être être plus précis que ça)

    .alert .glyphicon{
    display:table-cell;
}

.alert div,
.alert span{
    padding-left: 5px;
    display:table-cell;
}

    Voir Mise À Jour De Violon

  2. 4

    Il est maintenant plus propre (et le mieux les pratiques exemplaires de l'omi). (Mise à jour jsfiddle de l'OP)

    .alert {
    display: flex;
    flex-direction: row;
}

.alert .glyphicon {
    margin-right: 8px;
    align-self: center; //if you want it centered vertically
}

    Pratiquement tous les navigateurs prennent en charge flex zone de maintenant. https://caniuse.com/#feat=flexbox

    En aparté, bootstrap 4 ne fait plus de glyphicons nativement (s'il n'y a rien qui vous empêche d', y compris les glyphicons bibliothèque manuellement, ou plus communément de nos jours, fontawesome), mais il ne comprend affichage de classes en mode natif. Vous pouvez faire tout cela sans CSS. Bootstrap 4 jsfiddle

    <div class="container">
  <div class="card bg-light mt-4">
    <div class="card-header">
      <h3>
        Bootstrap 4
      </h3>
    </div>
    <div class="card-body">
      <div class="alert alert-warning d-flex flex-row">
        <i class="fas fa-fw fa-exclamation-circle mr-3 align-self-center"></i>
        <div>
          My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!
        </div>
      </div>
      <div class="alert alert-info d-flex flex-row">
        <i class="fas fa-fw fa-info-circle mr-3 mt-1"></i>
        <div>
          My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!
        </div>
      </div>
    </div>
  </div>
</div>

    De ne pas le centre de l'icône à la verticale, il suffit de supprimer les icônes align-self-center classe. Vous pourriez avoir besoin de jouer avec la marge du haut pour l'aligner avec le texte à l'aide de la mt-* classes. mt-1 a bien fonctionné pour cet exemple.

  3. 3

    C'est plutôt une solution simple à l'aide de la propriété overflow:

    .alert .glyphicon{
    float:left;
    margin-right:9px;
}

.alert div{
    overflow:hidden;
}

    http://jsfiddle.net/0vzmmn0v/39/

  4. 2

    Une autre façon serait de positionner l'icône

    HTML:

     <div class="lftPad glyphicon glyphicon-exclamation-sign">My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!</div>

    CSS:

    .lftPad { margin-left:25px; }
.lftPad.glyphicon-exclamation-sign:before{
    position: absolute;
    margin-left: -20px;
}