bootstrap-4 - tamaño - bootstrap 4 modal width

Ancho modal(aumento)

Question

Quiero que un modal sea aproximadamente el 80% del ancho de una pantalla. modal-lg no es lo suficientemente grande. Esta:

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

No funciona con Bootstrap 4.

Answer 1

Asegúrese de que su modal no esté colocado en un contenedor, intente agregar la anotación importante si no está cambiando el ancho del original.

Answer 2

Bootstrap 4 incluye utilidades de tamaño . Puede cambiar el tamaño a 25/50/75/100% del ancho de la página (me gustaría que hubiera incluso más incrementos).

Para usar estos reemplazaremos la clase modal-lg . Tanto el ancho predeterminado como el modal-lg usan css max-width para controlar el ancho modal, por lo que primero agregue la clase mw-100 para deshabilitar efectivamente el max-width . Luego simplemente agregue la clase de ancho que desee, por ejemplo, w-75 .

Answer 3

En Bootstrap 4 tienes que usar el atributo ''max-width'' y entonces funciona perfectamente.

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

Answer 4

Esta fue la solución que funcionó para mí:

.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>

Answer 5

Por respuesta receptiva.

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

Answer 6

Puede crear o simplemente anular el bootstrap por defecto modal-lg haciendo lo siguiente:

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

Si no está trabajando, simplemente agregue !important para que se vea como a continuación

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

Ahora llama al modal-lg .

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

Answer 7

Si usas Sass,

De acuerdo con la documentation puede personalizar sus valores predeterminados.

En su caso, puede anular fácilmente la variable llamada $modal-lg en su archivo _custom.scss .

Answer 8

Simplemente use! Importante después de dar el ancho de esa clase que reemplaza a su clase.

Por ejemplo

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

Esperemos que esto funcione para usted.

Answer 9

intenta usar px

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

Solo cambia el tamaño.