Wie kann ich die modale Breite des Bootstraps erhöhen?

Ich habe es versucht, bin aber falsch gelaufen

Hier ist die CSS

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

und hier ist das fehlgeschlagene Ergebnis

Fügen Sie in Ihrem Code für das modal-dialogdiv eine weitere Klasse hinzu modal-lg:

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

Oder wenn Sie Ihren modalen Dialog zentrieren möchten, verwenden Sie:

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

Der einfachste Weg kann der Inline-Stil auf modal-dialogdiv sein:

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

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

In meinem Fall,

1. Wenn Sie dem Modal eine statische Breite geben, wird die Reaktionsfähigkeit beeinträchtigt.
2. Die modal-lgKlasse war nicht breit genug.

so war die Lösung

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

und verwenden Sie die obige Klasse anstelle der modal-lgKlasse

In Bootstrap 3 müssen Sie den Modaldialog ändern. In diesem Fall können Sie die Klasse modal-admin an der Stelle hinzufügen, an der modal-dialog steht.

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

Sie können zwischen modal-lgund modal-xlKlassen wählen oder, wenn Sie eine benutzerdefinierte Breite wünschen, die Eigenschaft max-width mit Inline-CSS festlegen. Beispielsweise,

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

oder

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

In Bootstrap, der die Standardbreite modal-dialogist 600px. Sie können die Breite jedoch explizit ändern. Wenn Sie beispielsweise die Breite auf den Wert Ihrer Wahl maximieren möchten 800px, gehen Sie wie folgt vor:

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

Hinweis : Diese Änderung gilt für alle modalen Dialoge, die Sie in Ihrer Anwendung verwenden. Mein Vorschlag ist auch, dass es am besten ist, eigene CSS-Regeln zu definieren und den Kern des Frameworks nicht zu berühren.

Wenn Sie möchten, dass es nur für einen bestimmten modalen Dialog festgelegt wird, verwenden Sie Ihren eigenen eingängigen Klassennamen, modal-800dessen Breite 800pxwie folgt festgelegt ist:

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

Ebenso können Sie einen Klassennamen haben, der auf der Breite basiert, wie z . B. modal-700deren Breite 700px.

Hoffe es ist hilfreich!

Ich hatte ein großes Raster, das im Modal angezeigt werden musste, und nur das Anwenden der Breite auf den Körper funktionierte nicht richtig, da die Tabelle überlief, obwohl sie Bootstrap-Klassen enthielt. Am Ende habe ich die gleiche Breite auf modal-bodyund angewendet 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-->

Wenn Sie das modale Ansprechen beibehalten möchten, verwenden Sie% der Breite anstelle von Pixeln. Sie können dies inline (siehe unten) oder mit CSS tun.

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

Wenn Sie CSS verwenden, können Sie für modal-sm und modal-lg sogar unterschiedliche% ausführen.

Ich habe auch das gleiche Problem beim Erhöhen der Breite des Modals, Fenster wird nicht in der Mitte angezeigt. Nach der Arbeit habe ich die folgende Lösung gefunden.

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

Tatsächlich wenden Sie CSS auf modal div an.

Sie müssen CSS auf .modal-dialog anwenden

Siehe zum Beispiel den folgenden Code.

<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 bietet auch Klassen zum Festlegen der Div-Breite.

Für den kleinen modalen Gebrauch modal-sm

Und für große Modal modal-lg

Der einfachste Weg ist:

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

Hier können wir die Breite des Modals in Prozent des Bildschirms angeben.

Hier ist ein Arbeitsbeispiel, um dasselbe zu demonstrieren:

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

Fügen Sie in Ihrem Code für den Modal-Dialog div eine weitere Klasse hinzu, modal-lg:

benutze modal-xl

Ich nehme an, dass dies passiert, weil die maximale Breite eines Modals auf 500px eingestellt ist und die maximale Breite von modal-lg 800px beträgt. Ich nehme an, dass die Einstellung auf auto Ihr Modal reaktionsfähig macht

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

Der Wert des linken Randes entspricht der Hälfte der Breite des Modals. Ich verwende dies mit dem Maruti Admin-Thema, da es keine Klasse hat.modal-lg .modal-sm