web-dev-qa-db-fra.com

changer la largeur par défaut de bootstrap modal

J'essaie de changer la largeur par défaut du dialogue mais cela ne fonctionne pas. J'ai essayé les solutions mentionnées dans this post. Voici mon code HTML ci-dessous:

<style>

#myDialog .modal-dialog{

width:80%;

}


</style>


<div id="myDialog" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
                <div class="modal-title" id="Dialog_title">Text Document</div>
            </div>
            <div class="modal-body">

                <div id="my_doc_content"></div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="rg.closeDialog('myDialog');">Close</button>
            </div>
        </div>
    </div>
</div>
htmlcsstwitter-bootstraptwitter-bootstrap-3
6
John

Voici un JSFiddle qui peut vous aider: http://jsfiddle.net/h3WDq/1603/

Lorsque le style CSS est ajouté sur la classe .modal au lieu de .modal-dialog, vous pouvez simplement modifier la largeur du modal comme vous le souhaitez à l'aide du code suivant:

.modal{
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

J'espère que cela vous aide!

3
Steff Yang

Remplacer la .modal-dialog largeur

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

Placez ce morceau de code après le bootstrap.min.css pour remplacer sa largeur par défaut.

Voici violon de travail

7
M.Tanzil

Je suggère toujours de travailler avec des fichiers non-construits, en travaillant avec des sources, vous pouvez tirer parti de variables, mixins et, si nécessaire, de add/modify à un comportement par défaut non explicitement exposé ...

alors, allez à https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.3/scss/_modal.scss vous pouvez voir où les tailles sont définies et les ajouter/les modifier selon vos besoins ...

// example
@include media-breakpoint-up(lg) {
  .modal-extralg { max-width: $modal-lg * 2; }
}
0
Hitmands

Il suffit d'utiliser l'identifiant:

#myDialog {
    width:80%;
}
0
Ria