Bagaimana cara meningkatkan Lebar Modal Bootstrap?

Saya sudah mencoba ini tetapi salah

ini cssnya

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

dan inilah hasil yang gagal

Dalam kode Anda, untuk modal-dialogdiv, tambahkan kelas lain, modal-lg:

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

Atau jika Anda ingin memusatkan dialog modal Anda, gunakan:

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

Cara termudah adalah dengan gaya sebaris di modal-dialogdiv:

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

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

Dalam kasus saya,

1. Memberikan lebar statis pada modal akan merusak daya tanggap.
2. Itu modal-lg kelas tidak cukup lebar.

jadi solusinya

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

dan gunakan kelas di atas sebagai ganti modal-lgkelas

Anda dapat memilih antara kelas modal-lgdan modal-xlatau jika Anda ingin lebar khusus, setel properti lebar-maksimal dengan css sebaris. Sebagai contoh,

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

atau

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

Di Bootstrap 3 Anda perlu mengubah modal-dialog. Jadi, dalam kasus ini, Anda dapat menambahkan kelas modal-admin di tempat modal-dialog berdiri.

@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;
  }
}

Di Bootstrap, lebar default modal-dialogadalah 600px. Tapi Anda bisa secara eksplisit mengubah lebarnya. Misalnya, jika Anda ingin memaksimalkan lebarnya ke nilai pilihan Anda, 800pxmisalnya, lakukan hal berikut:

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

Catatan : Perubahan ini menyetel semua dialog modal yang Anda gunakan dalam aplikasi Anda. Juga, saran saya adalah yang terbaik adalah menetapkan aturan CSS Anda sendiri dan tidak menyentuh inti kerangka kerja.

Jika Anda hanya ingin mengaturnya untuk dialog modal tertentu, gunakan nama kelas yang menarik Anda sendiri modal-800yang lebarnya diatur ke 800px, sebagai berikut:

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

Demikian juga, Anda dapat memiliki nama kelas berdasarkan ukuran lebar seperti modal-700yang lebarnya700px .

Semoga bermanfaat!

Saya memiliki kotak besar yang perlu ditampilkan di modal dan hanya menerapkan lebar pada tubuh tidak berfungsi dengan benar karena tabel meluap meskipun memiliki kelas bootstrap di atasnya. Saya akhirnya menerapkan lebar yang sama pada modal-bodydan 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-->

Jika Anda ingin mempertahankan penggunaan responsif modal% dari lebar, bukan piksel. Anda dapat melakukannya secara in-line (lihat di bawah) atau dengan 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>

Jika Anda menggunakan CSS, Anda bahkan dapat melakukan% yang berbeda untuk modal-sm dan modal-lg.

Saya juga menghadapi masalah yang sama saat meningkatkan lebar modal, jendela tidak ditampilkan di tengah. Setelah bekerja saya menemukan solusi di bawah ini.

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

Sebenarnya, Anda menerapkan CSS pada modal div.

Anda harus menerapkan CSS pada .modal-dialog

Misalnya, lihat kode berikut.

<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 juga menyediakan kelas untuk mengatur lebar div.

Untuk penggunaan modal kecil modal-sm

Dan untuk modal besar modal-lg

Cara termudah untuk melakukannya adalah:

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

di mana kita dapat menentukan lebar modal dalam hal persentase layar.

Berikut adalah contoh kerja untuk menunjukkan hal yang sama:

<!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 kode Anda, untuk div modal-dialog, tambahkan kelas lain, modal-lg:

gunakan modal-xl

Saya kira ini terjadi karena max-width dari sebuah modal diatur ke 500px dan max-width dari modal-lg adalah 800px Saya kira mengaturnya ke auto akan membuat modal Anda responsif

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

nilai margin left adalah setengah dari lebar modal. Saya menggunakan ini dengan tema Maruti Admin karena tidak memiliki kelas.modal-lg .modal-sm