Bootstrap 4 Largeur modale)
modal-lg
n'est pas assez grand. Ceci:
.modal .modal-dialog {
width: 80%;
}
ne fonctionne pas avec Bootstrap 4.
9 réponses
vous pouvez créer ou simplement annuler le bootstrap par défaut modal-lg
en faisant ceci:
.modal-lg {
max-width: 80%;
}
Si vous ne travaillez pas seulement ajouter !important
de sorte qu'il ressemble à ci-dessous
.modal-lg {
max-width: 80% !important;
}
maintenant, appelez le modal-lg
.
<div class="modal-dialog modal-lg" role="document">
<!-- some modal content --->
</div
Pour répondre réponse.
@media (min-width: 992px) {
.modal-dialog {
max-width: 80%;
}
}
Bootstrap 4 inclut dimensionnement des utilitaires. Vous pouvez changer la taille à 25/50/75/100% de la largeur de la page (je souhaite qu'il y ait encore plus d'incréments).
pour les utiliser, nous remplacerons le modal-lg
classe. À la fois la largeur par défaut et modal-lg
utiliser css max-width
pour contrôler la largeur du modal, ajoutez d'abord le mw-100
classe de désactiver max-width
. Ensuite, ajoutez simplement la classe width que vous voulez, par exemple w-75
.
Il Suffit D'Utiliser !important après avoir donné la largeur de cette classe qui est override votre classe.
Par Exemple
.modal .modal-dialog {
width: 850px !important;
}
espérons que cela fonctionne pour vous.
dans Bootstrap 4, vous devez utiliser l'attribut 'max-width' et ensuite il 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>
C'est la solution qui a fonctionné pour moi:
.modal{
padding: 0 !important;
}
.modal-dialog {
max-width: 80% !important;
height: 100%;
padding: 0;
margin: 0;
}
.modal-content {
border-radius: 0 !important;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" class="menu-toggler" data-toggle="modal" data-target=".bd-example-modal-lg">Menu</a>
<div class="modal mobile-nav-modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<a href="#" class="" data-dismiss="modal">Close Menu</a>
<nav class="modal-nav">
<ul>
<li><a data-toggle="collapse" href="#collapseExample" role="button">Shop</a>
<div class="collapse" id="collapseExample">
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
</li>
<li><a href="#">Made To Order</a></li>
<li><a href="#">Heritage</a></li>
<li><a href="#">Style & Fit</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</nav>
</div>
</div>
</div>
assurez-vous que votre modal n'est pas placé dans un conteneur, essayez d'ajouter de la !annotation importante si elle ne change pas la largeur de l'original.
essayez d'utiliser px
.modal .modal-dialog {
width: 850px;
}
il suffit de changer la taille.
selon 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.