web-dev-qa-db-fra.com

Modification de la taille de l'alerte bootstrap

Existe-t-il un moyen de modifier la portée d'une alerte afin qu'elle ne soit pas entièrement parcourue?

Voici un exemple de mes alertes:

<div class="alert alert-success">Your first number was correct.</div>
csstwitter-bootstrapalert
23
user2399308

Utilisation de CSS 

.alert {
   width:40%;    
}

Exemple

http://www.bootply.com/96921

L'exemple ci-dessus fait que la largeur de l'alerte représente 40% du conteneur ou, dans ce cas, de l'écran.

Vous pouvez également définir une largeur fixe.

.alert {
   width:300px;    
}
26
Trevor

si vous voulez que l'alerte soit juste la taille du texte intérieur: 

.alert {
  display:inline-block;
}
24
AlainIb

Le placer dans une row et compenser sa col l’a fait pour moi.

<div class="row">
    <div class="alert alert-danger col-md-4 col-md-offset-4" align="center">

    </div>
</div>
9
shinzou

Je pense que cela fonctionnerait pour prendre simplement le code de la question

<div class="alert alert-success">

et ajoutez l'une des classes de colonne comme celle-ci

<div class="alert alert-success col-md-3">

Quelque chose comme ça a fonctionné pour moi de toute façon, mon code exact était 

<div class="alert alert-info alert-dismissible col-md-3" role="alert">

Fait une petite alerte Nice à partir d'un peu plus gros qu'un bouton.

1
cardamom

Si votre alerte fait partie d'un .row, le fait de définir sa classe pour inclure .col-lg-12 le force à s'étendre sur son conteneur.

0
MrD

Si le pourcentage ou les pixels fixes ne répondent pas aux exigences de quiconque et ont besoin de la largeur automatique conformément au texte, avec bootstrap 4.1.3, le simple ajout de "rangée" autour du div de l'alerte a été décisif:

<div class="row">
   <div id="info" class="alert alert-success"></div>
</div>

Cela répond au besoin J'espère que cela aidera quelqu'un avec la version spécifiée de Bootstrap.

0
Ajay Kumar