मैं ट्विटर बूटस्ट्रैप मोडल बॉक्स की डिफ़ॉल्ट चौड़ाई कैसे बदल सकता हूं?

Question

मैंने निम्नलिखित कोशिश की:

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

और यह जावास्क्रिप्ट:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

परिणाम वह नहीं है जिसकी मुझे उम्मीद थी। मोडल टॉप लेफ्ट स्क्रीन के केंद्र में स्थित है।

क्या कोई मेरी मदद कर सकता है। क्या किसी और ने भी इसे आजमाया है। मुझे लगता है कि यह करना कोई असामान्य बात नहीं है।

Comments

बूटस्ट्रैप प्लगइन में कई विकल्प नहीं हैं। बूटस्ट्रैप सीएसएस फ़ाइल में कक्षा का पता लगाने की कोशिश करें और देखें कि क्या यह सीएसएस के माध्यम से सेट है, तो आपको अधिलेखित करने में सक्षम होना चाहिए या कम से कम एक बेहतर सुराग होगा कि यह किस तत्व के बारे में है।

— गिलेस्क

निक एन के जवाब को एक बहुत अच्छे उत्तरदायी उत्तर के लिए देखें! stackoverflow.com/a/16090509/539484

— OnTheFly

Answer 1

अपडेट करें:

में bootstrap 3आप मॉडल-संवाद को बदलने की जरूरत। तो इस मामले में आप modal-adminउस जगह पर कक्षा जोड़ सकते हैं जहां modal-dialogखड़ा है।

मूल उत्तर (बूटस्ट्रैप <3)

क्या कोई निश्चित कारण है जिसे आप JS / jQuery के साथ बदलने का प्रयास कर रहे हैं?

आप इसे आसानी से सिर्फ सीएसएस के साथ कर सकते हैं, जिसका मतलब है कि आपको दस्तावेज़ में अपनी स्टाइलिंग करने की ज़रूरत नहीं है। अपने स्वयं के कस्टम सीएसएस फ़ाइल में, आप जोड़ते हैं:

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

आपके मामले में:

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

चयनकर्ता के समक्ष मैंने शरीर रखा है, इसका कारण यह है कि यह डिफ़ॉल्ट से अधिक प्राथमिकता लेता है। इस तरह आप इसे कस्टम CSS फ़ाइल में जोड़ सकते हैं, और बिना चिंता के बूटस्ट्रैप अपडेट कर सकते हैं।

Comments

@NickN के लिए बेहतर (उत्तरदायी) उत्तर के लिए नीचे स्क्रॉल करें!

— OnTheFly

@FloatingRock आप इसे प्रतिक्रियाशील बना सकते हैं, मेरे जवाब को देखें

— निक एन।

@NickN। हत्यारा! धन्यवाद निक

— फ्लोटिंगरॉक

बूटस्ट्रैप 3 यह आसान बनाता है। .modal .modal-dialog { width: 800px; }बाईं स्थिति स्वचालित रूप से गणना की जाती है।

— गैविन

वास्तव में, यह मेरे लिए काम नहीं करता है। @ZimSystem द्वारा टिप्पणी में दिए गए समाधान ने चाल चली।

— टनजो

Answer 2

यदि आप इसे सीएसएस के साथ उत्तरदायी बनाना चाहते हैं, तो इसका उपयोग करें:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

नोट 1: मैंने एक .largeकक्षा का उपयोग किया है , आप इसे सामान्य पर भी कर सकते हैं.modal

नोट 2: बूटस्ट्रैप 3 में नकारात्मक मार्जिन-बाएं की अब और आवश्यकता नहीं हो सकती है (व्यक्तिगत रूप से पुष्टि नहीं की गई है)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

नोट 3: बूटस्ट्रैप 3 और 4 में, एक modal-lgवर्ग है। तो यह पर्याप्त हो सकता है, लेकिन यदि आप इसे उत्तरदायी बनाना चाहते हैं, तो आपको अभी भी मेरे द्वारा बूटस्ट्रैप 3 के लिए दिए गए सुधार की आवश्यकता है।

कुछ एप्लिकेशन fixedमोडल्स का उपयोग किया जाता है, उस स्थिति में आप प्रयास कर सकते हैं width:80%; left:10%;(सूत्र: बाएं = 100 - चौड़ाई / 2)

Comments

यह बहुत संकीर्ण स्क्रीन पर स्क्रीन के आधे से मोडल होने का कारण बनता है।

— कोफीम

कॉफ़िएम, इसे ठीक करने के लिए एक मीडिया क्वेरी का उपयोग करें

— निक एन।

@NickN। मेरी मीडिया क्वेरी ने इसे ठीक नहीं किया। क्या आप एक उदाहरण जोड़ सकते हैं? उपेक्षा, मुझे मिल गया। न्यूनतम चौड़ाई के बजाय मेरे पास अधिकतम-चौड़ाई थी। @media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }

— HPWD

मैं बस एक% का उपयोग करके पर्याप्त नियंत्रण नहीं देता जैसा कि बूटस्ट्रैप में पहले से निर्मित स्तंभों का उपयोग करना है।

— एलेक्स

@ मुझे लगता है कि यह आपको अधिक नियंत्रण देता है, आप इसे मौजूदा कॉलम के साथ कैसे करेंगे?

— निक एन।

Answer 3

यदि आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं, तो आपको मोडल-डायलॉग डिव को बदलने की आवश्यकता है, न कि मोडल डिव की तरह, जैसा कि स्वीकृत उत्तर में दिखाया गया है। इसके अलावा, बूटस्ट्रैप 3 की उत्तरदायी प्रकृति को बनाए रखने के लिए, मीडिया क्वेरी का उपयोग करके ओवरराइड CSS लिखना महत्वपूर्ण है, इसलिए छोटे उपकरणों पर मोडल पूरी चौड़ाई होगी।

विभिन्न चौड़ाई के साथ प्रयोग करने के लिए इस JSField को देखें ।

एचटीएमएल

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

सीएसएस

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

Comments

bootstrap3 के लिए एक सही। मार्जिन के बिना काम करता है! thx

— SQueek

मैंने उत्तर में आईडी विशेषता को हटा दिया क्योंकि यह आवश्यक नहीं है।

— आर्कडेग्री

यह काम करता है, लेकिन यह mlunoe या डेव जवाब के रूप में उत्तरदायी नहीं है।

— कुसोमेलो

Answer 4

यदि आप ऐसा कुछ चाहते हैं जो सापेक्ष डिजाइन को तोड़ न दे तो यह कोशिश करें:

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

जैसा कि, @ मर्को जोहानसन कहते हैं, चयनकर्ता से पहले "निकाय" इतना है कि यह डिफ़ॉल्ट से अधिक प्राथमिकता लेता है।

Comments

मैं चारों ओर सभी तरह के margin-left:auto; margin-right:auto;बजाय बस का उपयोग करने की सलाह देता auto

— हूं

कुछ मामलों में किसी को top: 30%अंदर की सामग्री के आधार पर प्रतिशत की आवश्यकता हो सकती है।

— बूल.देव

जब मैं .modal.fade.in नियम को छोड़ देता हूं, तो यह मेरे लिए अच्छी तरह से काम करता है, जो कि बूटस्ट्रैप V2.2.2 में मोडल को नीचे की ओर ले जाता है।

— रमैरो

यह ANGULAR-UI मोडल उदाहरण के साथ काम किया ... बस एक सीएसएस फ़ाइल में कोड ड्रॉप करें और पृष्ठ में लोड करें ... angular-ui.github.io/bootstrap/#/modal ... plnnr.co

— Marcello de Sales

महान यह समाधान 2.3.2 बूटस्ट्रैप और इंटरनेट एक्सप्लोरर 8,9,10 में MAIN पर अच्छी तरह से काम करता है !!!! मार्जिन-वाम के साथ समाधान: -40% इंटरनेट एक्सप्लोरर में गलत है !!!

— 13-35 पर Cioxideru

Answer 5

बूटस्ट्रैप 3+ में मोडल संवाद के आकार को बदलने के लिए सबसे उपयुक्त तरीका है आकार संपत्ति का उपयोग करना। नीचे एक उदाहरण है, कक्षा के modal-smसाथ नोटिस करें modal-dialog, एक छोटे से मोडल का संकेत देता है। इसमें smछोटे के लिए, mdमध्यम के लिए और lgबड़े के लिए मान हो सकते हैं ।

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>

Comments

इसे मेरे जवाब में जोड़ा गया :)

— तुम

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

— वेबस्पैनर

मैं बूटस्ट्रैप 3.x का उपयोग कर रहा हूं और मुझे modal-mdक्लास नहीं लगती ।

— जेम्स पोउलॉज

Answer 6

के लिए Bootstrap 3यहाँ इसे कैसे करना है।

modal-wideअपने HTML मार्कअप में एक शैली जोड़ें (जैसा कि बूटस्ट्रैप 3 डॉक्स में उदाहरण से अनुकूलित किया गया है )

<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

और निम्नलिखित सीएसएस जोड़ें

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

ओवरराइड करने के लिए कोई जरूरत नहीं है margin-leftमें Bootstrap 3हो यह अब केंद्रित होना करने के लिए।

Comments

बस किसी भी भ्रम से बचने के लिए, modal-wideवर्ग जोड़ने का कोई तकनीकी कारण नहीं है , जिसका अर्थ है कि बूटस्ट्रैप "आंतरिक" वर्ग नहीं है। आप बस कर सकते हैं#myModal .modal-dialog { width: 80%; }

— गेविन

हां। लेकिन इसे एक शैली के रूप में करना इसे और अधिक पुन: प्रयोज्य बनाता है।

— डेव सैग

हां मैं समझता हूं। बूटस्ट्रैप क्लास और कस्टम क्लास के बीच अंतर करना कई बार मुश्किल होता है, इसलिए मैं इसे नोट करना चाहता था।

— गैविन

Answer 7

में बूटस्ट्रैप 3 आप सभी की जरूरत यह है

<style>
    .modal .modal-dialog { width: 80%; }
</style>

उपर्युक्त अधिकांश उत्तर मेरे लिए काम नहीं करते थे !!!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<style>
  #myModal1 .modal-dialog {
    width: 80%;
  }
  #myModal2 .modal-dialog {
    width: 50%;
  }
</style>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  80%
</button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  50%
</button>
<center>
  <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 80%
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 50%
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</center>

Comments

क्या आप जानते हैं कि मोडल की ऊँचाई कैसे बदलें? आपके उत्तर के लिए धन्यवाद, यह एक आकर्षण की तरह काम करता है :)

— FrenkyB

Answer 8

इस पृष्ठ से समाधान लिया गया था

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});

Answer 9

बूटस्ट्रैप के v3 में मोडल को बड़ा बनाने की एक सरल विधि है। बस modal-dialog के आगे वर्ग modal-lg जोड़ें ।

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">

Comments

क्यों नीचे वोट ?! यह बिल्कुल, और सफाई से, मुझे एक अच्छा चौड़ा संवाद बॉक्स दिया! और केवल "उचित" बूटस्ट्रैप कक्षाओं का उपयोग करता है!

— डेव

अपने HTML तत्वों में से कुछ को ट्रिप करने का प्रयास करें - इसका परीक्षण करने के लिए सबसे सरल संरचना का उपयोग करें।

— डेव

Answer 10

बूटस्ट्रैप 3: छोटे और अतिरिक्त छोटे उपकरणों के लिए उत्तरदायी सुविधाओं को बनाए रखने के लिए मैंने निम्नलिखित कार्य किए:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}

Comments

यह सही है। यह मेरे लिए काम करता है। उत्तरदायी लेआउट के लिए चौड़ाई संपत्ति को XX% में बदलना न भूलें। Btw, मेरे मामले में संस्करण 3.0.3 है

— जेरी चेन

Answer 11

यही मैंने किया है, मेरे custom.css में मैंने इन पंक्तियों को जोड़ा और वह सब था।

.modal-lg {
    width: 600px!important;
    margin: 0 auto;
}

जाहिर है, आप चौड़ाई का आकार बदल सकते हैं।

Answer 12

यदि बूटस्ट्रैप> 3, बस अपने मोडल में स्टाइल जोड़ें।

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>

Answer 13

मुझे यह समाधान मिल गया है जो मेरे लिए बेहतर काम करता है। आप इसका उपयोग कर सकते हैं:

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

या यह आपकी आवश्यकताओं पर निर्भर करता है:

$('.modal').css({
  width: 'auto',
  'margin-left': function () {
     return -($(this).width() / 2);
  }
});

वह पोस्ट देखें जहाँ मैंने पाया कि: https://github.com/twitter/bootstrap/issues/675

Answer 14

FYI बूटस्ट्रैप 3 बाईं संपत्ति को स्वचालित रूप से संभालता है। तो बस इस सीएसएस को जोड़ने से चौड़ाई बदल जाएगी और इसे केंद्रित रखा जाएगा:

.modal .modal-dialog { width: 800px; }

Comments

B3 के लिए काम किया! आपका बहुत बहुत धन्यवाद!

— बागता

Answer 15

उत्तरदायी डिजाइन को संरक्षित करें, आप जो चाहते हैं उसकी चौड़ाई निर्धारित करें।

.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

इसे सरल रखें।

Answer 16

वर्ग को बदलने से model-dialogआप अपेक्षित परिणाम प्राप्त कर सकते हैं। मेरे लिए ये छोटे-छोटे टोटके काम करते हैं। आशा है कि यह आपको इस मुद्दे को हल करने में मदद करेगा।

.modal-dialog {
    width: 70%;
}

Answer 17

बूटस्ट्रैप 3 के साथ, आवश्यक सभी सीएसएस के माध्यम से मोडल-डायलॉग को दिया गया प्रतिशत मूल्य है

सीएसएस

#alertModal .modal-dialog{
     width: 20%;
}

Comments

हाँ, ओटम का उस्तरा इसी पर जाता है। 3.0 पर परीक्षण किया गया महान काम करता है

— गुई डे गिनिटिक

Answer 18

मैंने इस पेज पर संकेत के साथ CSS और jQuery के संयोजन का उपयोग किया, बूटस्ट्रैप 3 का उपयोग करके एक तरल पदार्थ की चौड़ाई और ऊंचाई बनाने के लिए।

सबसे पहले, सामग्री क्षेत्र के लिए चौड़ाई और वैकल्पिक स्क्रॉलबार को संभालने के लिए कुछ सीएसएस

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

और फिर जरूरत पड़ने पर सामग्री क्षेत्र की ऊंचाई को समायोजित करने के लिए कुछ jQuery

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

Http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-use-bootstrap-3/ पर पूरा लेखन और कोड

Answer 19

में बूटस्ट्रैप 3 सीएसएस के साथ आप बस का उपयोग कर सकते हैं:

body .modal-dialog {
    /* percentage of page width */
    width: 40%;
}

यह सुनिश्चित करता है कि आप पृष्ठ का डिज़ाइन नहीं तोड़ेंगे, क्योंकि हम इसका उपयोग कर रहे हैं जिसके .modal-dialogबजाय .modalछायांकन पर भी लागू किया जाएगा।

Answer 20

निम्नलिखित की तरह कुछ आज़माएं (लाइव jsfiddle उदाहरण देखें: http://jsfiddle.net/periklis/hEThw/1/ )

<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

Answer 21

मॉडल को उत्तरदायी बनाने के लिए प्रतिशत का उपयोग करने के बजाय, मुझे लगता है कि पहले से ही बूटस्ट्रैप में निर्मित कॉलम और अन्य उत्तरदायी तत्वों का उपयोग करने से अधिक नियंत्रण हो सकता है।

---

किसी भी राशि के कॉलम को मोडल रिस्पॉन्सिबल / साइज़ बनाने के लिए:

1) मॉडल-डायलॉग डिव के चारों ओर एक अतिरिक्त div जोड़ें। -कंटेनर की एक क्लास -

<div class="container">
    <div class="modal-dialog">
    </div>
</div>

2) मोडल को पूरी चौड़ाई बनाने के लिए थोड़ा सीएसएस जोड़ें -

.modal-dialog {
    width: 100% }

3) वैकल्पिक रूप से एक अतिरिक्त वर्ग में जोड़ें यदि आपके पास अन्य मोडल हैं -

<div class="container">
    <div class="modal-dialog modal-responsive">
    </div>
</div>

.modal-responsive.modal-dialog {
    width: 100% }

4) यदि आप विभिन्न आकार के मोडल चाहते हैं तो एक पंक्ति / कॉलम में जोड़ें -

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="modal-dialog modal-responsive">
       ...
      </div>
    </div>
  </div>
</div>

Answer 22

अपनी सीएसएस फ़ाइल पर निम्नलिखित जोड़ें

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }

Answer 23

स्क्रिप्ट का उपयोग करें:

.modal {
  --widthOfModal: 98%;
  width: var(--widthOfModal) !important;
  margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
  height: 92%;

  overflow-y: scroll;
}

डेमो :

Answer 24

मैंने इसे बूटस्ट्रैप 4.1 के लिए हल किया

पहले से पोस्ट किए गए समाधानों का मिश्रण

.modal-lg {
  max-width: 90% !important; /* desired relative width */
  margin-left:auto !important;
  margin-right:auto !important;
}

Answer 25

प्राप्त अपेक्षित परिणाम का उपयोग करते हुए,

.modal-dialog {
    width: 41% !important;
}

Answer 26

बूटस्ट्रैप 3.xx

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
            </div>

            <div class="modal-body row">
                Modal Body...
            </div>

            <div class="modal-footer"> 
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

        </form>

    </div>
</div>

सूचना मैं जोड़ा गया। बेरोजगारी दूसरे वर्ग में नोडल वर्ग। फिर उस क्लास को स्टाइल करें।

.employeeModal{
        width: 700px;
    }

Answer 27

मैंने इस तरह से इस्तेमाल किया, और यह मेरे लिए एकदम सही है

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});

Answer 28

बूटस्ट्रैप 2 के लिए कम-आधारित समाधान (कोई जेएस):

.modal-width(@modalWidth) {
    width: @modalWidth;
    margin-left: -@modalWidth/2;

    @media (max-width: @modalWidth) {
        position: fixed;
        top:   20px;
        left:  20px;
        right: 20px;
        width: auto;
        margin: 0;
        &.fade  { top: -100px; }
        &.fade.in { top: 20px; }
    }
}

फिर जहाँ भी आप एक मोडल चौड़ाई निर्दिष्ट करना चाहते हैं:

#myModal {
    .modal-width(700px);
}

Answer 29

मैंने SCSS का उपयोग किया, और पूरी तरह उत्तरदायी मोडल:

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
} 

Answer 30

you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name.    

body .modal-nk {
        /* new custom width */
        width: 560px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -280px;
    }

या

body .nk-modal {
            /* new custom width */
            width: 560px;
            /* must be half of the width, minus scrollbar on the left (30px) */
            margin-left: -280px;
        }