Largeur modale (augmentation)

Question

Je souhaite qu'une modale occupe environ 80 % de la largeur de l'écran. modal-lg n'est pas assez grande. Ceci :

.modal .modal-dialog {
  width: 80%;
}

Ne fonctionne pas avec Bootstrap 4.

Answer 1

Vous pouvez créer ou simplement remplacer le bootstrap par défaut. modal-lg en faisant ce qui suit :

.modal-lg {
    max-width: 80%;
}

Si cela ne fonctionne pas, ajoutez simplement !important afin que cela ressemble à ce qui suit

.modal-lg {
    max-width: 80% !important;
}

Maintenant, appelez le modal-lg .

<div class="modal-dialog modal-lg" role="document">
 <!-- some modal content --->
</div

Answer 2

Bootstrap 4 comprend dimensionnement des services publics . Vous pouvez modifier la taille à 25/50/75/100% de la largeur de la page (j'aimerais qu'il y ait encore plus d'incréments).

Pour les utiliser, nous remplacerons le modal-lg classe. La largeur par défaut et la modal-lg utiliser le css max-width pour contrôler la largeur de la modale, il faut d'abord ajouter l'option mw-100 pour désactiver efficacement la classe max-width . Ensuite, il suffit d'ajouter la classe de largeur que vous voulez, par ex. w-75 .

Notez que vous devez placer le mw-100 et w-75 dans le div avec le modal-dialog et non la classe modal div par exemple,

<div class='modal-dialog mw-100 w-75'>
    ...
</div>

Answer 3

Pour une réponse réactive.

@media (min-width: 992px) {
  .modal-dialog {
    max-width: 80%;
  }
}

Answer 4

Dans Bootstrap 4, vous devez utiliser l'attribut "max-width" et cela fonctionne parfaitement.

<div id="modal_dialog" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog" style="max-width: 1350px!important;" role="document">
    <div class="modal-content">
        <div class="modal-body">
            Sample text
        </div>
    </div>
</div>

Answer 5

Il suffit d'utiliser !important après avoir donné la largeur de la classe qui surcharge votre classe.

Par exemple

.modal .modal-dialog {
  width: 850px !important;
}

J'espère que cela vous conviendra.