web-dev-qa-db-fra.com

Bootstrap 3 modal responsive

J'ai un modal mais il ne redimensionne pas sur des écrans plus petits (tablettes, etc.). Existe-t-il un moyen de le rendre réactif? Impossible de trouver des informations sur les documents bootstrap. Merci

Je mets à jour mon code html: (son à l'intérieur d'un Django pour la boucle)

    <div class="modal fade " id="{{ p.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Producto</h4>
          </div>
          <div class="modal-body">
            <h5>Nombre : {{ p.name}}</h5>       
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>

          </div>

        </div>
      </div>
    </div>

J'ai ces paramètres CSS:

.modal-lg {
  max-width: 900px;}
@media (min-width: 768px) {
   .modal-lg {
    width: 100%;
  } 
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
htmlcsstwitter-bootstrap-3
22
jesicadev18

J'ai eu le même problème que j'ai résolu en ajoutant une requête multimédia pour @ screen-xs-min dans une version inférieure sous Modals.less

@media (max-width: @screen-xs-min) {
  .modal-xs { width: @modal-sm; }
}
9
Nufayl

De la docs :

Les modaux ont deux tailles facultatives, disponibles via des classes de modificateurs à placer sur un .modal-dialog: modal-lg et modal-sm (à partir de 3.1).

De plus, le dialogue modal se redimensionnera lui-même sur de petits écrans (à partir de 3.1.1).

16
PM 77-1

Vous devriez pouvoir ajuster la largeur en utilisant le .modal-dialog sélecteur de classe (en conjonction avec requêtes multimédias ou quelle que soit la stratégie que vous utilisez pour une conception réactive):

.modal-dialog {
    width: 400px;
}
8
sfletche

Ancien poste. J'ai fini par définir des requêtes multimédias et utiliser max-width: YYpx; et width:auto; pour chaque point d'arrêt. Cela sera également mis à l'échelle avec les images (par exemple, vous avez une image d'une largeur de 740 pixels sur l'écran md), le modal sera réduit à 740 pixels (sans le rembourrage pour le .modal-body, si appliqué)

<div class="modal fade" id="bs-button-info-modal" tabindex="-1" role="dialog" aria-labelledby="Button Information Modal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <div class="modal-body"></div>
        </div>
    </div>
</div>

Notez que j'utilise SCSS, bootstrap 3.3.7, et que je n'ai apporté aucune modification supplémentaire au _modals.scss fichier qui _bootstrap.scss importations. Le CSS ci-dessous est ajouté à un fichier SCSS supplémentaire et importé APRÈS _bootstrap.scss.

Il est également important de noter que les styles bootstrap originaux pour .modal-dialog n'est pas défini pour le point d'arrêt 992px par défaut, mais aussi haut que le point d'arrêt 768px (auquel une largeur fixe a été appliquée width: 600px;, d'où la raison pour laquelle je l'ai remplacé avec width: auto;.

@media (min-width: $screen-sm-min) { // this is the 768px breakpoint
    .modal-dialog {
        max-width: 600px;
        width: auto;
    }
}

@media (min-width: $screen-md-min) { // this is the 992px breakpoint
    .modal-dialog { 
        max-width: 800px;
    }
}

Exemple ci-dessous de modal répondant à une image.

enter image description here

2
Rob Scott

J'ai eu le même problème, et un moyen facile que j'ai trouvé de résoudre était de rendre tout le corps du modal réactif (en utilisant des classes boostrap) et mon problème a été résolu.

0
Fokou Franklin