Làm thế nào để tăng Chiều rộng Phương thức Bootstrap?

tôi đã thử cái này nhưng sai rồi

đây là css

body .modal-ku {
width: 750px;
}

và đây là kết quả thất bại

Trong mã của bạn, cho modal-dialogdiv, thêm một lớp khác, modal-lg:

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

Hoặc nếu bạn muốn căn giữa hộp thoại phương thức của mình, hãy sử dụng:

.modal-ku {
  width: 750px;
  margin: auto;
}

Cách dễ nhất có thể là kiểu nội tuyến trên modal-dialogdiv:

<div class="modal" id="myModal">
   <div class="modal-dialog" style="width:1250px;">
      <div class="modal-content">
            ...

        </div>
     </div>
 </div>

Trong trường hợp của tôi,

1. Việc cung cấp chiều rộng tĩnh cho phương thức sẽ ảnh hưởng đến khả năng phản hồi.
2. Các modal-lglớp học đã không đủ rộng.

vì vậy giải pháp là

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

và sử dụng lớp trên thay vì modal-lglớp

Trong Bootstrap 3, bạn cần thay đổi hộp thoại phương thức. Vì vậy, trong trường hợp này, bạn có thể thêm lớp modal-admin vào vị trí của hộp thoại modal.

@media (min-width: 768px) {
  .modal-dialog {
    width: 600;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}

Bạn có thể chọn giữa modal-lgvà modal-xlcác lớp hoặc nếu bạn muốn chiều rộng tùy chỉnh thì hãy đặt thuộc tính chiều rộng tối đa bằng css nội tuyến. Ví dụ,

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

hoặc là

<div class="modal-dialog" style="max-width: 80%;" role="document">

Trong Bootstrap, chiều rộng mặc định modal-dialoglà 600px. Nhưng bạn có thể thay đổi chiều rộng của nó một cách rõ ràng. Ví dụ: nếu bạn muốn tối đa hóa chiều rộng của nó đến giá trị bạn chọn 800px, bạn thực hiện như sau:

.modal-dialog {
    width: 800px;
    margin: 30px auto;
}

Lưu ý : Thay đổi này đặt thành tất cả hộp thoại phương thức bạn sử dụng trong ứng dụng của mình. Ngoài ra, gợi ý của tôi là tốt nhất nên xác định các quy tắc CSS của riêng bạn và không chạm vào cốt lõi của khung.

Nếu bạn chỉ muốn nó được đặt cho hộp thoại phương thức cụ thể, hãy sử dụng tên lớp hấp dẫn của riêng bạn modal-800với chiều rộng được đặt thành 800px, như sau:

HTML

<div class="modal">
   <div class="modal-dialog modal-800">
      <div class="modal-content">

      </div>
   </div>
</div>

CSS

.modal-dialog.modal-800 {
    width: 800px;
    margin: 30px auto;
}

Tương tự như vậy, bạn có thể có tên lớp dựa trên kích thước chiều rộng như modal-700chiều rộng của nó là700px .

Hy vọng nó hữu ích!

Tôi có một lưới lớn cần được hiển thị trong phương thức và việc chỉ áp dụng chiều rộng trên thân không hoạt động chính xác vì bảng bị tràn mặc dù nó có các lớp bootstrap trên đó. Tôi đã áp dụng cùng một chiều rộng trên modal-bodyvà modal-content:

<!--begin::Modal-->
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content" style="width:980px;">
            <div class="modal-header">
                <h5 class="modal-title" id="">Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="la la-remove"></span>
                </button>
            </div>
            <form class="m-form m-form--fit m-form--label-align-right">
                <div class="modal-body" style="width:980px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-brand m-btn" data-dismiss="modal">Close</button>

                </div>
            </form>
        </div>
    </div>
</div>

<!--end::Modal-->

Nếu bạn muốn giữ phương thức đáp ứng, hãy sử dụng% chiều rộng thay vì pixel. Bạn có thể làm điều đó trong dòng (xem bên dưới) hoặc với CSS.

<div class="modal fade" id="phpModal" role="dialog">
            <div class="modal-dialog modal-lg" style="width:80%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">HERE YOU TITLE</h4>
                    </div>
                    <div class="modal-body helpModal phpModal">
                        HERE YOUR CONTENT
                    </div>
                </div>
            </div>
        </div>

Nếu bạn sử dụng CSS, bạn thậm chí có thể thực hiện% khác nhau cho modal-sm và modal-lg.

Tôi cũng gặp phải vấn đề tương tự khi tăng chiều rộng của phương thức, cửa sổ không hiển thị ở trung tâm. Sau khi làm việc xung quanh, tôi tìm thấy giải pháp dưới đây.

.modal-dialog {
    max-width: 850px;
    margin: 2rem auto;
}

Trên thực tế, bạn đang áp dụng CSS trên div modal.

bạn phải áp dụng CSS trên .modal-hộp thoại

Ví dụ, hãy xem đoạn mã sau.

<div class="modal" id="myModal">
 <div class="modal-dialog" style="width:xxxpx;"> <!-- Set width of div which you want -->
      <div class="modal-content">
           Lorem Ipsum some text...content 

        </div>
     </div>
 </div>

Bootstrap cũng cung cấp các lớp để thiết lập chiều rộng div.

Để sử dụng phương thức nhỏ modal-sm

Và đối với phương thức lớn modal-lg

Cách đơn giản nhất để làm điều đó là:

$(".modal-dialog").css("width", "80%");

nơi chúng ta có thể chỉ định chiều rộng của phương thức theo tỷ lệ phần trăm của màn hình.

Đây là một ví dụ làm việc để chứng minh điều tương tự:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

n mã của bạn, đối với div modal-hộp thoại, hãy thêm một lớp khác, modal-lg:

sử dụng modal-xl

Tôi cho rằng điều này xảy ra do chiều rộng tối đa của phương thức được đặt thành 500px và chiều rộng tối đa của modal-lg là 800px. Tôi cho rằng đặt nó thành tự động sẽ làm cho phương thức của bạn đáp ứng

.your_modal {
    width: 800px;
    margin-left: -400px; 
 }

giá trị của margin left bằng một nửa chiều rộng của modal. Tôi đang sử dụng cái này với chủ đề Maruti Admin vì nó không có lớp.modal-lg .modal-sm