Jak ustawić modę twitter bootstrap coraz szerszy?

Question

Jak ustawić modę twitter bootstrap coraz szerszy?

Przykład tutaj (proszę kliknąć: Uruchom demo modalna):

http://twitter.github.com/bootstrap/javascript.html#modals

Answer 1

Jeśli modalne id jest "myModal"

Można spróbować dodać styl, takich jak:

#myModal 
{ 
    width: 700px; 
    margin-top: -300px !important; 
    margin-left: -350px !important; 
} 

#myModal .modal-body { 
    max-height: 525px; 
} 

Answer 2

Z CSS:

.modal { 
    width: 900px; 
    margin-left: -450px; // half of the width 
} 

Answer 3

W pliku css, dodać nową definicję klasy:

.higherWider { 
    width:970px; 
    margin-top:-250px; 
} 

w HTML, dodać higherWider wewnątrz łańcucha klasy dla modalnym:

<div class="modal hide fade higherWider"> 

Answer 4

Dla wielkości w%, można zrobić to:

.modal-body 
{ 
    max-height:80%; 
} 
.modal 
{ 
    height:80%; 
    width:70%; 
    margin-left: -35%; 
} 
@media (max-width: 768px) { 
    .modal 
    { 
    width:90%; 
     margin-left: 2%; 
    } 
} 

Answer 5

W Bootstrap 3.1.1 dodali modal-lg i modal-sm klas. Kontrolujesz rozmiar modal przy użyciu zapytań typu @media, tak jak robią to. Jest to bardziej globalny sposób kontrolowania rozmiaru modal.

@media (min-width: 992px) { 
    .modal-lg { 
     width: 900px; 
     height: 900px; /* control height here */ 
    } 
} 

Przykładowy kod:

<!-- Large modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div> 

<!-- Small modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> 

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div> 

Answer 6

jednej z następujących rozwiązań pracował dla mnie:

1. Stosując style="width: 50%; height:50%;" do div w sekcji modalnego z class="modal-dialog" jak tak

   <div class="modal-dialog" style="width: 50%; height:50%;"> 
   

   lub

2. Tworzenie sekcję styl podobnie jak

   #themodal .modal-dialog{ width:50%; height:50%;} 
   

Answer 7

Najprostszym sposobem, aby to zrobić jest użycie .modal-LG. Dodaj go do klasy modal-dialog w modalnej kontenera tak:

<div class="modal fade"> 
    <div class="modal-dialog modal-lg" role="document"> 
      <div class="modal-content"> 
       I am now wider! 
      </div> 
    </div> 
</div> 

Answer 8

zmienianie klasa modelu dialogowe wystarczyły mi

.modal-dialog { 
    width: 90%; 
} 

Answer 9

Zaakceptowanych odpowiedź działa dobrze, jednak polecam korzystania wypełnienie zamiast marginesu. W ten sposób zachowujesz funkcję zamykania po kliknięciu poza modalnym oknem dialogowym.

#myModal { 
    width: 700px; 
    padding-top: -300px !important; 
    padding-left: -350px !important; 
} 

#myModal .modal-body { 
    max-height: 525px; 
}