बूटस्ट्रैप मोडल चौड़ाई कैसे बढ़ाएं?

Question

मैंने यह कोशिश की है, लेकिन गलत हो गया है

यहाँ एक सीएसएस है

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

और यहाँ असफल परिणाम है

Comments

बूटस्ट्रैप में आप छोटे और बड़े आकार के लिए modal-sm, modal-lg का उपयोग कर सकते हैं।

— सिंह सिंह

क्या आप अपना विशिष्ट html और css कोड साझा कर सकते हैं। कुछ शैलियों पर काबू पाया जा सकता है

— निखिल बत्रा

क्या आप अपना पूर्ण कोड साझा कर सकते हैं या आप इस उदाहरण को देख सकते हैं, इस मॉडल में चौड़ाई परिवर्तनशील हो सकती है। w3schools.com/bootstrap/…

— Har devgun

@ हर्षेवगुण कृपया बताएं कि उस उदाहरण में कोई भी मोडल आकार को कैसे बदल सकता है? यह एक साधारण, डेमो, निश्चित आकार मोडल के अलावा कुछ भी नहीं है।

— प्रोफ ०

Answer 1

आपके कोड में, modal-dialogdiv के लिए, एक और वर्ग जोड़ें modal-lg:

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

या यदि आप अपने मोडल संवाद को केंद्र में रखना चाहते हैं, तो उपयोग करें:

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

Answer 2

सबसे आसान तरीका modal-dialogdiv पर इनलाइन स्टाइल हो सकता है :

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

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

Comments

उत्तरदायी n सभी होने के बारे में सभी उपद्रव के बारे में क्या?

— अभिनव सिंह

@ अभिनव सिंह: आप सही कह रहे हैं। हार्ड-कोड px मान अनुशंसित नहीं है। प्रतिशत या Calc की सिफारिश की जाती है।

— सोच

उत्तरदायी: चौड़ाई: 100%; अधिकतम-चौड़ाई: 1250px

— clamchoda

Answer 3

मेरे मामले में,

1. मोडल को स्थिर चौड़ाई देने से जवाबदेही को नुकसान पहुंचता है।
2. modal-lgवर्ग विस्तृत पर्याप्त नहीं था।

तो समाधान था

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

और के बजाय ऊपर वर्ग का उपयोग modal-lgवर्ग

Comments

कृपया पिछली कक्षा कौन सी है?

— जॉन मैक्स

@ जॉनमोक्स का अर्थ है "उपरोक्त वर्ग का उपयोग करें"

— श्री हीलिस

Answer 4

बूटस्ट्रैप 3 में आपको मोडल-डायलॉग को बदलना होगा। तो, इस स्थिति में, आप उस क्लास मोडल-एडमिन को जोड़ सकते हैं जहां मोडल-डायलॉग खड़ा है।

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

Answer 5

आप modal-lgऔर modal-xlकक्षाओं के बीच चयन कर सकते हैं या यदि आप कस्टम चौड़ाई चाहते हैं, तो इनलाइन सीएसएस के साथ अधिकतम-चौड़ाई की संपत्ति सेट करें। उदाहरण के लिए,

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

या

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

Comments

यह महान @sumod badchhape काम किया। मैंने 'मोडल-एलजी' क्लास को हटा दिया और अधिकतम-चौड़ाई: it०% लगा दी और इसने चाल चली !!

— सॉटिरिस ज़ेनिज़निस

Answer 6

बूटस्ट्रैप में, की डिफ़ॉल्ट चौड़ाई modal-dialogहै 600px। लेकिन आप स्पष्ट रूप से इसकी चौड़ाई बदल सकते हैं। उदाहरण के लिए, यदि आप इसकी चौड़ाई को अपनी पसंद के मान से अधिकतम करना चाहते हैं, 800pxउदाहरण के लिए, आप निम्न कार्य करते हैं:

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

नोट : यह परिवर्तन आपके एप्लिकेशन में आपके द्वारा उपयोग किए जाने वाले सभी मोडल संवाद पर सेट होता है। इसके अलावा, मेरा सुझाव यह है कि आपके अपने सीएसएस नियमों को परिभाषित करना सबसे अच्छा है और रूपरेखा के मूल को नहीं छूना है।

यदि आप केवल इसे विशिष्ट मोडल संवाद के लिए सेट करना चाहते हैं, तो अपने स्वयं के आकर्षक वर्ग नाम का उपयोग करें, modal-800जिसकी चौड़ाई 800pxनिम्नानुसार है:

एचटीएमएल

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

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

सीएसएस

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

इसी तरह, आप चौड़ाई के आकार के आधार पर वर्ग का नाम रख सकते हैं, modal-700जिसकी चौड़ाई है 700px।

आशा है कि यह उपयोगी है!

Answer 7

मेरे पास एक बड़ा ग्रिड था जिसे मोडल में प्रदर्शित करने की आवश्यकता थी और सिर्फ शरीर पर चौड़ाई लागू करना सही तरीके से काम नहीं कर रहा था क्योंकि टेबल पर अतिप्रवाह था, हालांकि इसमें बूटस्ट्रैप कक्षाएं थीं। मैंने उसी चौड़ाई को लागू करते हुए समाप्त किया modal-bodyऔर 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-->

Answer 8

यदि आप पिक्सेल के बजाय मोडल उत्तरदायी उपयोग चौड़ाई का% रखना चाहते हैं। आप इसे इन-लाइन (नीचे देखें) या सीएसएस के साथ कर सकते हैं।

<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 का उपयोग करते हैं, तो आप modal-sm और modal-lg के लिए अलग-अलग% भी कर सकते हैं।

Answer 9

मैंने उसी मुद्दे का भी सामना किया है जब मोडल की चौड़ाई बढ़ाते हुए, खिड़की केंद्र में प्रदर्शित नहीं हो रही है। चारों ओर काम करने के बाद मैंने नीचे समाधान पाया।

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

Answer 10

दरअसल, आप CSS को modal div पर लगा रहे हैं।

आपको .modal-dialog पर CSS लागू करना होगा

उदाहरण के लिए, निम्न कोड देखें।

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

बूटस्ट्रैप डिव चौड़ाई सेट करने के लिए कक्षाएं भी प्रदान करता है।

छोटे मोडल उपयोग के लिए modal-sm

और बड़े मोडल के लिए modal-lg

Answer 11

इसे करने का सबसे सरल तरीका है:

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

जहां हम स्क्रीन के प्रतिशत के संदर्भ में मोडल की चौड़ाई निर्दिष्ट कर सकते हैं।

यहाँ एक ही प्रदर्शित करने के लिए काम कर रहा उदाहरण है:

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

Answer 12

n आपका कोड, मोडल-डायलॉग div के लिए, एक अन्य वर्ग, modal-lg जोड़ें:

मोडल-एक्सएल का उपयोग करें

Comments

दूसरों के जवाब की नकल न करें

— राय तलहा रहमान खान

Answer 13

मुझे लगता है कि यह 500x पर सेट एक मोडल की अधिकतम-चौड़ाई के कारण होता है और मोडल-एलजी की अधिकतम-चौड़ाई 800px है। मुझे लगता है कि इसे ऑटो पर सेट करना आपके मोडल को उत्तरदायी बना देगा

Answer 14

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

मार्जिन बाईं ओर का मान मोडल की चौड़ाई का आधा है। मैं मारुति एडमिन थीम के साथ इसका उपयोग कर रहा हूं क्योंकि इसमें क्लास नहीं है.modal-lg .modal-sm