web-dev-qa-db-fra.com

Icône à gauche de l'alerte Bootstrap

J'essaie de mettre un glyphicon sur le côté gauche d'un div alert. Lorsque le texte de l'alerte comporte plus d'une ligne, je souhaite que la nouvelle ligne commence là où le texte de la première ligne a commencé, plutôt que sous le glyphique.

Si j'utilise divs pour l'icône et le message, l'icône se trouve en haut du message. Si j'utilise des étendues, le message suit l'icône et se termine sous celle-ci.

Supposons que la largeur du glyphicon ne soit pas connue à l'avance. L'utilisation du sélecteur ::first-line n'est donc pas viable sans quelque chose de plus intelligent que moi. Je ne souhaite pas non plus placer le glyphicon dans un .col-* car .col-*-1 est beaucoup trop volumineux. .pull-left et .pull-right n'ont pas semblé avoir d'effet, que j'utilise un div ou une étendue pour le glyphicon et le message.

La solution la plus simple consiste à utiliser une table (le gasp!), Mais j'essaie d'éviter cela.

Je décide également si je veux que l'icône soit en haut à gauche ou au centre à gauche de l'alerte. Même avec une table, j'avais du mal à centrer l'icône verticalement.

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?

csshtml5twitter-bootstrap-3
14
dx_over_dt

Il existe maintenant un moyen plus propre (et de meilleures pratiques imo) de le faire. (Mise à jour jsfiddle de 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 Box maintenant. https://caniuse.com/#feat=flexbox

Soit dit en passant, bootstrap 4 n’utilise plus glyphicons de manière native (bien que rien ne vous empêche d’inclure manuellement la bibliothèque de glyphicons - ou plus communément de nos jours, fontawesome), mais il inclut des classes d’affichage natives. 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>

Pour ne pas centrer l’icône verticalement, supprimez simplement les icônes align-self-center classe. Vous devrez peut-être manipuler la marge supérieure pour l'aligner correctement sur le texte à l'aide des classes mt-*. mt-1 a bien fonctionné pour cet exemple.

5
dx_over_dt

Essayez d'ajouter ceci à votre CSS (vous devrez peut-être être plus spécifique que cela)

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

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

Voir Mise à jour Fiddle

22
ochi

C'est une solution assez simple utilisant la propriété overflow:

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

.alert div{
    overflow:hidden;
}

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

3
b_m

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;
}
2
epascarello

Devrait être assez simple avec Bootstrap 4:

<div class="alert alert-warning">
    <div class="row"> <!-- add no-gutters to make it narrower -->
        <div class="col-auto align-self-start"> <!-- or align-self-center -->
            <div class="glyphicon glyphicon-exclamation-sign"></div>
        </div>
        <div class="col">
            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>

Pas de CSS personnalisé nécessaire. :)

1
Alix Axel