Bootstrap Modal Genişliği nasıl artırılır?

bunu denedim ama yanlış yaptım

işte css

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

ve işte başarısız sonuç

Kodunuzda, için modal-dialogdiv, başka bir sınıf eklemek modal-lg:

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

Veya kalıcı diyaloğunuzu ortalamak istiyorsanız, şunu kullanın:

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

En kolay yol, modal-dialogdiv üzerinde satır içi stil olabilir :

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

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

Benim durumumda,

1. Kipe statik bir genişlik verilmesi, duyarlılığı bozar.
2. modal-lgSınıf yeterince geniş değildi.

yani çözüm

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

ve yerine yukarıda sınıfını kullanmak modal-lgsınıf

modal-lgVe modal-xlsınıflar arasında seçim yapabilir veya özel genişlik istiyorsanız, satır içi css ile maksimum genişlik özelliğini ayarlayabilirsiniz. Örneğin,

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

veya

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

Bootstrap 3'te kalıcı iletişim kutusunu değiştirmeniz gerekir. Dolayısıyla, bu durumda, modal-dialog'un bulunduğu yere modal-admin sınıfını ekleyebilirsiniz.

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

BOOTSTRAP, varsayılan genişliği modal-dialogolan 600px. Ancak genişliğini açıkça değiştirebilirsiniz. Örneğin, genişliğini seçtiğiniz değere kadar maksimize etmek isterseniz, 800pxörneğin şunları yaparsınız:

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

Not : Bu değişiklik, uygulamanızda kullandığınız tüm kalıcı iletişim kutusuna ayarlanır. Ayrıca benim önerim, kendi CSS kurallarınızın tanımlanması ve çerçevenin özüne dokunmamanız en iyisidir.

Yalnızca belirli kalıcı iletişim kutusu için ayarlanmasını istiyorsanız , aşağıdaki gibi modal-800genişliği olarak ayarlanan kendi akılda kalıcı sınıf adınızı kullanın 800px:

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

Aynı şekilde, genişliği modal-700kimin olduğu gibi , genişlik boyutuna göre sınıf adına sahip olabilirsiniz 700px.

Umarım yardımcı olur!

Modalde görüntülenmesi gereken büyük bir ızgaram vardı ve sadece gövdeye genişlik uygulamak düzgün çalışmıyordu, çünkü üzerinde bootstrap sınıfları olmasına rağmen tablo taşıyordu. Aynı genişliği uyguladım modal-bodyve 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-->

Modal genişliğini artırırken de aynı sorunla karşılaştım, pencere merkezde görüntülenmiyor. İşten sonra aşağıdaki çözümü buldum.

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

Bu sizin için çalışıyorsa oyunuzu bırakın. Mutlu Yazarlar!

Modal duyarlılığını korumak istiyorsanız, pikseller yerine genişlik% 'sini kullanın. Bunu satır içi (aşağıya bakın) veya CSS ile yapabilirsiniz.

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

CSS kullanıyorsanız, modal-sm ve modal-lg için farklı% bile yapabilirsiniz.

Aslında, modal div üzerine CSS uyguluyorsunuz.

.modal-dialog'a CSS uygulamalısınız

Örneğin, aşağıdaki koda bakın.

<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 ayrıca div genişliğini ayarlamak için sınıflar sağlar.

Küçük modal kullanım için modal-sm

Ve büyük model için modal-lg

Bunu yapmanın en basit yolu:

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

ekran yüzdesi olarak modal genişliğini belirleyebiliriz.

İşte aynısını göstermek için çalışan bir örnek:

<!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 kodunuz, modal-dialog div için başka bir sınıf, modal-lg ekleyin:

modal-xl kullanın

Sanırım bu, bir modalın maksimum genişliğinin 500px olarak ayarlanması ve modal-lg'nin maksimum genişliğinin 800px olması nedeniyle gerçekleşir.

Bunun eski olduğunu biliyorum, ancak arayan biri için artık max-width özelliğini ayarlamanız gerekiyor.

.modal-1000 {
    max-width: 1000px;
    margin: 30px auto;
}

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

sol kenar boşluğu değeri modun genişliğinin yarısıdır. Bunu, sınıfı olmadığı için Maruti Admin temasıyla kullanıyorum.modal-lg .modal-sm