2014-09-16 38 views
31

Ich verwende diesen Code aber die modal ist zu dünn zu machen:Versuch Bootstrap-modal breiter

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

Dies ist, wie es aussieht:

Thin modal

Wie kann ich das modal machen viel breiter? Idealerweise würde ich es gerne doppelt so breit haben, da es im Moment zu dünn ist.

+0

Es ist breiter - siehe [bootply hier] (http://www.bootply.com/AAwcKf6kSW) – Dan

+0

Hmm, die ungewöhnlich ist dann. Gibt es eine Möglichkeit, das Modal dann noch weiter zu machen? Es muss etwas in meinem CSS sein, das es überschreibt. – b85411

+0

In meiner bootstrap.min.css sehe ich das: '@media Bildschirm und (min-Breite: 768px) {. Modal-Dialog {Breite: 600px; Rand: 30px Auto}' - Könnte diese feste Breite mein Problem verursachen? – b85411

Antwort

80

Immer griffbereit die nicht-minified CSS für Bootstrap, so dass Sie sehen können, welche Stile sie auf ihren Komponenten haben, dann erstellen Sie eine CSS-Datei NACH ihr, wenn Sie keine LESS verwenden und überschreiben ihre Mixins oder was auch immer

Diese

ist die Standard-modal CSS für 768px und bis:

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

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

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

Wenn Sie somet brauchen Wenn du die 600-Pixel-Größe zweimal und etwas Fließendes suchst, führe in deinem CSS nach dem Bootstrap css so etwas aus und ordne diese Klasse dem modalen Dialog 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

+0

Danke !! Arbeitete für mich !! :) – hardvin

+0

Funktioniert hervorragend. –

+0

Ausgezeichnet! Funktioniert gut! –