web-dev-qa-db-fra.com

Largeur modale (augmentation)

Je veux qu'un modal soit 80% ou plus d'une largeur d'écran. modal-lg n'est pas assez grand. Cette:

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

Ne fonctionne pas avec Bootstrap 4.

bootstrap-4bootstrap-modal
39
Oleg Antonyan

Bootstrap

Vous pouvez créer ou simplement remplacer la valeur par défaut bootstrap modal-lg en procédant ci-dessous:

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

Si cela ne fonctionne pas, ajoutez simplement !important pour qu'il ressemble à ce qui suit

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

Appelez maintenant le modal-lg.

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

Pour Bootstrap 4, reportez-vous à la réponse de @ kitsu.eb. Notez également que l’utilisation des utilitaires bootstrap 4 peut compromettre la réactivité.

72
claudios

Bootstrap 4 inclut tilitaires de dimensionnement . Vous pouvez changer la taille en 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 allons remplacer la classe modal-lg. La largeur par défaut et modal-lg utilisent tous deux css max-width pour contrôler la largeur du modal. Ajoutez donc d'abord la classe mw-100 pour désactiver efficacement max-width. Ensuite, ajoutez simplement la classe de largeur souhaitée, par exemple w-75.

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

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

Pour une réponse sensible.

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

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>
3
Nemus

Dans Bootstrap 4, vous devez utiliser l'attribut 'max-width', puis 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>
3
CeezS

Utilisez simplement! Important après avoir donné à la classe la largeur de cette classe.

Par exemple

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

Espérons que cela fonctionnera pour vous.

2
Unknown_Coder

essayez d'utiliser px

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

il suffit de changer la taille.

0
mjishigh

Si vous utilisez Sass,

selon la documentation vous pouvez personnaliser vos valeurs par défaut.

Dans votre cas, vous pouvez facilement remplacer la variable nommée $modal-lg dans votre fichier _custom.scss.

0
s.a.filko
The following solution will work for Bootstrap 4.

.modal .modal-dialog {
  max-width: 850px;
}
0
Asraf Ud Duha

Assurez-vous que votre modal n'est pas placé dans un conteneur, essayez d'ajouter l'annotation! Important si elle ne change pas la largeur par rapport à celle d'origine.

0
Elie Nassif