Der Versuch, das Bootstrap-Modal breiter zu machen

73

Ich benutze diesen Code, aber das Modal ist zu dünn:

<div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-lg">
            <div class="modal-header modal-lg">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Solutions</h4>
            </div>
            <div class="modal-body modal-lg">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

So sieht es aus:

Dünnes Modal

Wie kann ich dieses Modal viel breiter machen? Idealerweise möchte ich, dass es ungefähr doppelt so breit ist, da es im Moment zu dünn ist.

twitter-bootstrap modal-dialog b85411
quelle
Hmm das ist dann ungewöhnlich. Gibt es eine Möglichkeit, das Modal dann noch breiter zu machen? Es muss etwas in meinem CSS geben, das es überschreibt.
b85411
In meiner bootstrap.min.css sehe ich Folgendes: @media screen and (min-width:768px){.modal-dialog{width:600px;margin:30px auto}- Könnte diese feste Breite mein Problem verursachen?
B85411

Antworten:

192

Halten Sie immer das nicht minimierte CSS für Bootstrap bereit, damit Sie sehen können, welche Stile sie auf ihren Komponenten haben, und erstellen Sie anschließend eine CSS-Datei, wenn Sie WENIGER nicht verwenden und ihre Mixins oder was auch immer überschreiben

Dies ist das standardmäßige modale CSS für 768px und höher:

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  ...
}

Sie haben eine Klasse modal-lgfür größere Breiten

@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

Wenn Sie etwas benötigen, das doppelt so groß wie 600 Pixel ist, und etwas Fließendes, tun Sie dies in Ihrem CSS nach dem Bootstrap-CSS und weisen Sie diese Klasse dem Modaldialog zu.

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

HTML

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

Demo: http://jsbin.com/yefas/1

Christina
quelle
3
Dies muss ".modal .modal-xl" sein
Matt
2
Wenn eine Legende für diesen Tag ausgewählt werden müsste ... wären Sie die Wahl! Danke für die Hilfe. Das Platzieren in meiner boostrap.css hat aus irgendeinem Grund nicht funktioniert (Vielleicht habe ich etwas falsch gemacht), aber das Platzieren in meiner Rasiermesseransicht hat wie ein Zauber funktioniert! Für diejenigen, die das gleiche tun möchten, müssen Sie ein doppeltes @: @@ media hinzufügen ....
AxleWack
11

Wenn Sie diese Lösung nur für wenige Modaltypen benötigen, verwenden Sie einfach style="width:90%"Attribut.

Beispiel:

div class="modal-dialog modal-lg" style="width:90%"

Hinweis: Dies ändert nur dieses bestimmte Modal

Krzyszof Ra
quelle
genau das, was ich brauchte.
t.karalis
3

Du könntest es versuchen:

.modal.modal-wide .modal-dialog {
  width: 90%;
}

.modal-wide .modal-body {
  overflow-y: auto;
}

Fügen Sie Ihren Klassen einfach .modal-wide hinzu

Thieleju
quelle