Modal largeur (augmentation)
Je veux un modal de 80% de la largeur de l'écran. modal-lg
n'est pas assez grand. Ce:
.modal .modal-dialog {
width: 80%;
}
Ne fonctionne pas avec Bootstrap 4.
Dans le bootstrap 3 je viens de l'utiliser
modal-lg
et modal-sm
classes ont de grandes et de petites auxiliaires modaux. Vous pouvez également overrite la .modal-lg
dans votre css.
OriginalL'auteur Oleg Antonyan | 2017-03-20
Vous devez vous connecter pour publier un commentaire.
Vous pouvez créer ou de substituer par défaut bootstrap
modal-lg
en faisant ci-dessous:Si vous ne travaillez pas seulement ajouter de la
!important
donc, il devrait ressembler à ci-dessousMaintenant appeler les
modal-lg
.OriginalL'auteur claudios
Bootstrap 4 comprend le dimensionnement des utilitaires. Vous pouvez modifier la taille de 25/50/75/100% de la largeur de la page (je souhaite qu'il y avait encore plus de valeur).
À l'utilisation de ces nous allons remplacer le
modal-lg
classe. À la fois la largeur par défaut etmodal-lg
utiliser les cssmax-width
pour contrôler la modale de la largeur, donc tout d'abord ajouter lemw-100
classe pour désactiver lamax-width
. Ensuite, il suffit d'ajouter les classes de largeur que vous voulez, par exemple,w-75
.C'est la vraie réponse.
Mais en est-il sensible? J'ai changé pour une fenêtre modale, mais pour le mobile de la fenêtre c'est en conservant la classe. un modal-lg ne le ferai pas je pense
Toute utilisation de la largeur des classes potentiellement sauts de réactivité. Il y avait une proposition pour répondre largeur des classes (ex.
w-lg-100
), mais le bootstrap responsables n'ai pas besoin de les ajouter.Oui, ce que je pensais. Par conséquent, une
@media (min-width: 992px)
m'a aidé à résoudre le problème à la place de celui-ci. Merci quand même.OriginalL'auteur kitsu.eb
Pour sensible réponse.
OriginalL'auteur Joel Enanod Jr
Simplement Utiliser !important après avoir donné la largeur de cette classe qui est à remplacer votre classe.
Par Exemple
J'espère que cela fonctionne pour vous.
OriginalL'auteur Unknown_Coder
Dans le Bootstrap 4, vous devez utiliser 'max-width' attribut et il fonctionne parfaitement.
OriginalL'auteur CeezS
Assurez-vous que votre modal n'est pas placé dans un conteneur, essayez d'ajouter de la !important annotation si ce n'est pas la modification de la largeur de l'original.
OriginalL'auteur Elie Nassif
essayez d'utiliser px
il suffit de changer la taille.
OriginalL'auteur mjishigh
Si vous utilisez Sass,
selon la la documentation vous pouvez personnaliser vos valeurs par défaut.
Dans votre cas, vous pouvez facilement remplacer la variable nommée
$modal-lg
dans votre_custom.scss
fichier.OriginalL'auteur s.a.filko