Đang cố gắng để làm cho phương thức bootstrap rộng

Question

Tôi đang sử dụng mã này, nhưng các phương thức là quá mỏng:

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

Đây là những gì nó trông giống như:

Làm thế nào tôi có thể làm cho phương thức mà Rộng hơn rất nhiều? Lý tưởng nhất là tôi muốn nó được khoảng gấp đôi chiều rộng đó vì nó quá gầy tại thời điểm này.

Answer 1

Luôn có tiện dụng CSS un-minified cho bootstrap để bạn có thể xem những gì phong cách mà họ có về thành phần của họ, sau đó tạo một file CSS SAU nó, nếu bạn không sử dụng LESS và ghi đè mixins của họ hoặc bất cứ điều gì

Đây là css phương thức mặc định cho 768px trở lên:

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

Họ có một lớp modal-lg cho độ rộng lớn hơn

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

Nếu bạn cần somet hing hai lần kích thước 600px, và một cái gì đó chất lỏng, làm một cái gì đó như thế này trong CSS của bạn sau khi css Bootstrap và gán lớp đó vào hộp thoại phương thức.

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

HTML

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

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