Làm thế nào để thiết lập chế độ bootstrap twitter rộng hơn và cao hơn?

Question

Làm thế nào để thiết lập chế độ khởi động twitter rộng hơn và cao hơn?

Ví dụ ở đây (xin vui lòng click: Launch Demo modal):

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

Answer 1

Nếu id phương thức của bạn là "myModal"

Bạn có thể thử thêm một phong cách như:

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

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

Answer 2

Với CSS:

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

Answer 3

Trong file css của bạn, thêm một định nghĩa lớp mới:

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

Trong HTML của bạn, thêm higherWider bên trong chuỗi lớp cho modal của bạn:

<div class="modal hide fade higherWider"> 

Answer 4

Đối với một kích thước trong%, bạn có thể làm này:

.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

Trong Bootstrap 3.1.1 họ thêm modal-lg và modal-sm lớp. Bạn kiểm soát kích thước modal bằng cách sử dụng @media truy vấn giống như chúng. Đây là cách toàn cầu hơn để kiểm soát kích thước modal.

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

Mẫu mã:

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

Một trong các giải pháp sau làm việc cho tôi:

1. Áp dụng style="width: 50%; height:50%;" đến div trong phần phương thức với class="modal-dialog" như vậy

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

   hoặc

2. Tạo một phần phong cách như vậy

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

Answer 7

Cách đơn giản nhất để làm điều này là sử dụng .modal-lg. Thêm nó vào lớp modal-thoại trong container phương thức như vậy:

<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

làm thay đổi lớp mô hình thoại đã làm các trick cho tôi

.modal-dialog { 
    width: 90%; 
} 

Answer 9

Câu trả lời được chấp nhận hoạt động tốt, tuy nhiên tôi sẽ khuyên bạn sử dụng padding hơn là margin. Bằng cách này, bạn giữ nguyên chức năng loại bỏ khi bạn nhấp vào bên ngoài hộp thoại phương thức.

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

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