web-dev-qa-db-fra.com

Comment augmenter la largeur modale de Bootstrap?

j'ai essayé mais je me suis trompé

voici le css

body .modal-ku {
width: 750px;
}

et voici le résultat raté

 enter image description here

htmlcsshtml5css3twitter-bootstrap-3
59
Damara Jati P

Dans votre code, pour le modal-dialog div, ajoutez une autre classe, modal-lg:

<div class="modal-dialog modal-lg">

Ou si vous voulez centrer votre dialogue modal, utilisez:

.modal-ku {
  width: 750px;
  margin: auto;
}
151
Praveen Kumar Purushothaman

La méthode la plus simple consiste à utiliser le style en ligne sur modal-dialog div:

<div class="modal" id="myModal">
   <div class="modal-dialog" style="width:1250px;">
      <div class="modal-content">
            ...

        </div>
     </div>
 </div>
20
Mudasir

Dans Bootstrap 3, vous devez changer la boîte de dialogue modale. Donc, dans ce cas, vous pouvez ajouter la classe modal-admin à l'endroit où se trouve modal-dialog.

@media (min-width: 768px) {
  .modal-dialog {
    width: 600;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}
6
huageorg

Dans Bootstrap, la largeur par défaut de modal-dialog est 600px. Mais vous pouvez explicitement changer sa largeur. Par exemple, si vous souhaitez agrandir sa largeur à la valeur de votre choix, 800px par exemple, procédez comme suit:

.modal-dialog {
    width: 800px;
    margin: 30px auto;
}

Remarque : Cette modification définit tous les dialogues modaux que vous utilisez dans votre application. En outre, ma suggestion est qu'il est préférable de définir vos propres règles CSS et de ne pas toucher au cœur du cadre.

Si vous souhaitez uniquement le définir pour une boîte de dialogue modale spécifique, utilisez votre propre nom de classe accrocheur sous le nom modal-800 dont la largeur est définie sur 800px, comme suit:

HTML

<div class="modal">
   <div class="modal-dialog modal-800">
      <div class="modal-content">

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

CSS

.modal-dialog.modal-800 {
    width: 800px;
    margin: 30px auto;
}

De même, vous pouvez avoir un nom de classe basé sur la largeur comme modal-700 dont la largeur est 700px.

J'espère que c'est utile!

5
Wolverine

Juste comme une contribution Dans mon cas, la classe modal-lg n'était pas assez large et donner une largeur statique au modal n'était pas une bonne idée pour la réactivité.

alors ce qui a résolu mon problème était 

@media (min-width: 1200px) {
   .modal-xlg {
      width: 90%; 
   }
}

et utilise la classe précédente au lieu de la classe modal-lg

4
Hakam Fostok

J'avais une grande grille qui devait être affichée dans le modal et appliquer simplement la largeur sur le corps ne fonctionnait pas correctement car la table débordait alors qu'il y avait des classes bootstrap. J'ai fini par appliquer la même largeur sur modal-body et modal-content:

<!--begin::Modal-->
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content" style="width:980px;">
            <div class="modal-header">
                <h5 class="modal-title" id="">Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="la la-remove"></span>
                </button>
            </div>
            <form class="m-form m-form--fit m-form--label-align-right">
                <div class="modal-body" style="width:980px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-brand m-btn" data-dismiss="modal">Close</button>

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

<!--end::Modal-->
1
Ehsan Sajjad

Si vous souhaitez conserver la réponse modale, utilisez% de largeur au lieu de pixels. Vous pouvez le faire en ligne (voir ci-dessous) ou avec CSS.

<div class="modal fade" id="phpModal" role="dialog">
            <div class="modal-dialog modal-lg" style="width:80%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">HERE YOU TITLE</h4>
                    </div>
                    <div class="modal-body helpModal phpModal">
                        HERE YOUR CONTENT
                    </div>
                </div>
            </div>
        </div>

Si vous utilisez CSS, vous pouvez même faire différents% pour modal-sm et modal-lg.

0
Henry

En fait, vous appliquez CSS sur modal div.

vous devez appliquer CSS sur .modal-dialog 

Par exemple, voir le code suivant.

<div class="modal" id="myModal">
 <div class="modal-dialog" style="width:xxxpx;"> <!-- Set width of div which you want -->
      <div class="modal-content">
           Lorem Ipsum some text...content 

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

Bootstrap fournit également des classes pour définir la largeur de la division.

Pour une petite utilisation modale modal-sm

Et pour les grands modaux modal-lg

0
Muddasir23

Je suppose que cela se produit en raison de la largeur maximale d'un modal défini sur 500px et de la largeur maximale de modal-lg de 800px. Je suppose que le réglage sur auto rendra votre modal réactif 

0
Mahi Tej Gvp