Come aumentare la larghezza modale di Bootstrap?

l'ho provato ma ho sbagliato

ecco il css

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

ed ecco il risultato fallito

Nel tuo codice, per il modal-dialogdiv, aggiungi un'altra classe modal-lg,:

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

O se vuoi centrare la tua finestra di dialogo modale, usa:

.modal-ku {
  width: 750px;
  margin: auto;
}

Il modo più semplice può essere lo stile in linea su modal-dialogdiv:

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

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

Nel mio caso,

1. Dare una larghezza statica al modale danneggia la reattività.
2. La modal-lgclasse non era abbastanza ampia.

quindi la soluzione era

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

e usa la classe sopra invece della modal-lgclasse

In Bootstrap 3 è necessario modificare la finestra di dialogo modale. Quindi, in questo caso, puoi aggiungere la classe modal-admin nel posto in cui si trova il 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;
  }
}

Puoi scegliere tra modal-lge modal-xlclassi o, se desideri una larghezza personalizzata, imposta la proprietà di larghezza massima con CSS in linea. Per esempio,

<div class="modal-dialog modal-xl" role="document">

o

<div class="modal-dialog" style="max-width: 80%;" role="document">

In Bootstrap, la larghezza predefinita di modal-dialogè 600px. Ma puoi modificarne esplicitamente la larghezza. Ad esempio, se desideri massimizzare la sua larghezza al valore di tua scelta, 800pxad esempio, fai come segue:

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

Nota : questa modifica viene impostata su tutte le finestre di dialogo modali utilizzate nell'applicazione. Inoltre, il mio suggerimento è che è meglio avere le proprie regole CSS definite e non toccare il nucleo del framework.

Se vuoi che sia impostato solo per una finestra di dialogo modale specifica, usa il tuo nome di classe accattivante la modal-800cui larghezza è impostata su 800px, come segue:

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

Allo stesso modo, puoi avere il nome della classe basato sulla dimensione della larghezza come la modal-700cui larghezza è 700px.

Spero sia utile!

Avevo una grande griglia che doveva essere visualizzata nel modale e la semplice applicazione della larghezza sul corpo non funzionava correttamente poiché la tabella era traboccante sebbene avesse classi di bootstrap su di essa. Ho finito per applicare la stessa larghezza su modal-bodye 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-->

Se vuoi mantenere la reattività modale usa la% di larghezza invece dei pixel. Puoi farlo in linea (vedi sotto) o con 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>

Se usi CSS, puoi anche fare diversi% per modal-sm e modal-lg.

Ho anche affrontato lo stesso problema aumentando la larghezza del modale, la finestra non viene visualizzata al centro. Dopo il lavoro ho trovato la soluzione seguente.

.modal-dialog {
    max-width: 850px;
    margin: 2rem auto;
}

In realtà, stai applicando CSS su div modale.

devi applicare CSS su .modal-dialog

Ad esempio, vedere il codice seguente.

<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 fornisce anche classi per impostare la larghezza del div.

Per uso modale piccolo modal-sm

E per modali di grandi dimensioni modal-lg

Il modo più semplice per farlo è:

$(".modal-dialog").css("width", "80%");

dove possiamo specificare la larghezza del modale in termini di percentuale dello schermo.

Ecco un esempio funzionante per dimostrare lo stesso:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Nel tuo codice, per il div di dialogo modale, aggiungi un'altra classe, modal-lg:

usa modal-xl

Suppongo che ciò accada a causa della larghezza massima di un modale impostato su 500px e della larghezza massima di modal-lg è 800px Suppongo che impostarlo su automatico renderà il tuo modale reattivo

.your_modal {
    width: 800px;
    margin-left: -400px; 
 }

il valore del margine sinistro è la metà della larghezza modale. Lo sto usando con il tema di amministrazione di Maruti poiché non ha classe.modal-lg .modal-sm