373

ฉันพยายามต่อไปนี้:

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

และ Javascript นี้:

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

ผลลัพธ์ไม่ใช่สิ่งที่ฉันคาดไว้ ด้านบนซ้ายเป็นกิริยาช่วยอยู่ในตำแหน่งตรงกลางของหน้าจอ

ทุกคนสามารถช่วยฉันได้ มีใครลองอีกไหม ฉันคิดว่าไม่ใช่เรื่องผิดปกติที่อยากจะทำ

javascript jquery twitter-bootstrap-2

— Nullpo
แหล่งที่มา

Bootstrap plugin ไม่เห็นว่ามีตัวเลือกมากมาย ลองหาคลาสในไฟล์ bootstrap CSS และดูว่ามันถูกตั้งค่าผ่าน CSS หรือไม่ถ้าอย่างนั้นคุณควรจะเขียนทับหรืออย่างน้อยก็จะมีเงื่อนงำที่ดีกว่าเกี่ยวกับองค์ประกอบที่เป็น

— GillesC

3

ดูคำตอบจาก Nick N สำหรับคำตอบที่ตอบสนองดีมาก! stackoverflow.com/a/16090509/539484

— OnTheFly

373

UPDATE:

ในbootstrap 3คุณต้องเปลี่ยนกิริยาโต้ตอบ ดังนั้นในกรณีนี้คุณสามารถเพิ่มชั้นเรียนmodal-adminในสถานที่ที่modal-dialogยืน

คำตอบเดิม (Bootstrap <3)

มีเหตุผลบางอย่างที่คุณพยายามเปลี่ยนด้วย JS / jQuery หรือไม่?

คุณสามารถทำได้ง่ายๆด้วย CSS ซึ่งหมายความว่าคุณไม่จำเป็นต้องใส่สไตล์ในเอกสาร ในไฟล์ CSS ที่คุณกำหนดเองคุณเพิ่ม:

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 ที่กำหนดเองได้โดยไม่ต้องอัปเดต Bootstrap

— Marco Johannesen
แหล่งที่มา

2

เลื่อนด้านล่างเพื่อรับคำตอบที่ดีขึ้น (ตอบสนอง) ขอบคุณ @NickN!

— OnTheFly

1

@FloatingRock คุณสามารถทำให้ตอบสนองได้ดูคำตอบของฉัน

— Nick N.

1

@NickN นักฆ่า! ขอบคุณ Nick

— FloatingRock

47

Bootstrap 3 ทำให้ง่ายขึ้น .modal .modal-dialog { width: 800px; }ตำแหน่งด้านซ้ายจะคำนวณโดยอัตโนมัติ

— กาวิน

1

จริงๆแล้วมันใช้ไม่ได้สำหรับฉัน วิธีการแก้ปัญหาให้ในความคิดเห็นโดย @ZimSystem ทำเคล็ดลับ

— tonjo

270

หากคุณต้องการตอบสนองด้วย CSS เพียงแค่ใช้สิ่งนี้:

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

หมายเหตุ 1: ฉันใช้.largeคลาสคุณสามารถทำได้ตามปกติ.modal

หมายเหตุ 2: ใน Bootstrap 3 ขอบซ้ายติดลบอาจไม่จำเป็นอีกต่อไป (ไม่ได้รับการยืนยันเป็นการส่วนตัว)

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

หมายเหตุ 3: ใน Bootstrap 3 และ 4 มี modal-lgคลาส ดังนั้นนี่อาจเพียงพอ แต่ถ้าคุณต้องการให้ตอบสนองคุณยังต้องแก้ไขที่ฉันให้ไว้สำหรับ Bootstrap 3

ในบางfixedกรณีจะใช้โมเดอเรเตอร์ในกรณีนี้คุณสามารถลองได้width:80%; left:10%;(สูตร: left = 100 - width / 2)

— นิคเอ็น
แหล่งที่มา

ดูเหมือนว่าจะทำให้โมดัลปิดครึ่งหน้าจอบนหน้าจอที่แคบมาก

— cofiem

5

Cofiem ใช้แบบสอบถามสื่อเพื่อแก้ไขปัญหานี้

— Nick N.

1

@NickN ข้อความค้นหาสื่อของฉันไม่สามารถแก้ไขได้ คุณสามารถเพิ่มตัวอย่างได้หรือไม่ ไม่สนใจฉันเข้าใจแล้ว ฉันมีความกว้างสูงสุดแทนที่จะเป็นความกว้างต่ำสุด

@media (min-width: 400px) { 		  body .modal-lrg{ 			width: 80%; /* respsonsive width */ 			margin-left:-40%; /* width/2) */ 		} 	}

— HPWD

ฉันพบว่าใช้แค่% ไม่ได้ให้การควบคุมมากพอที่จะใช้คอลัมน์ที่มีอยู่แล้วใน bootstrap

— อเล็กซ์

@Alex ฉันคิดว่ามันช่วยให้คุณควบคุมได้มากขึ้นคุณจะทำอย่างไรกับคอลัมน์ที่มีอยู่

— Nick N.

107

หากคุณใช้ Bootstrap 3 คุณต้องเปลี่ยน div-dialog dival และไม่ใช่ modal div ดังที่แสดงในคำตอบที่ยอมรับ นอกจากนี้เพื่อรักษาลักษณะการตอบสนองของ Bootstrap 3 สิ่งสำคัญคือการเขียน CSS แทนที่โดยใช้เคียวรีสื่อบันทึกดังนั้น modal จะเต็มความกว้างบนอุปกรณ์ขนาดเล็ก

ดูJSFiddle นี้เพื่อทดสอบความกว้างที่แตกต่างกัน

HTML

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

CSS

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

— arcdegree
แหล่งที่มา

3

แก้ไขหนึ่งสำหรับ bootstrap3 ทำงานได้โดยไม่ต้องปรับระยะขอบ! ขอบคุณ

— SQueek

1

ฉันลบแอตทริบิวต์ id ในคำตอบเพราะไม่จำเป็น

— arcdegree

มันใช้งานได้ แต่มันไม่ตอบสนองเหมือนคำตอบของ mlunoe หรือ Dave

— ksiomelo

80

หากคุณต้องการบางสิ่งที่ไม่ทำให้การออกแบบสัมพัทธ์ผิดลองทำสิ่งนี้:

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

ในฐานะที่ @Marco Johannesen กล่าวว่า "เนื้อหา" ก่อนตัวเลือกคือเพื่อให้มีลำดับความสำคัญสูงกว่าค่าเริ่มต้น

— mlunoe
แหล่งที่มา

4

ฉันขอแนะนำให้ใช้margin-left:auto; margin-right:auto;แทนautoวิธีการทุกรอบ

— cwd

ในบางกรณีอาจจำเป็นต้องtop: 30%ใช้เปอร์เซ็นต์ขึ้นอยู่กับเนื้อหาภายใน

— bool.dev

6

สิ่งนี้ทำงานได้ดีสำหรับฉันเมื่อฉันข้ามกฎ. modal.fade.in ซึ่งจะทำให้ modal ไปจนถึงด้านล่างใน Bootstrap V2.2.2

— ramiro

1

สิ่งนี้ใช้ได้กับตัวอย่างโมดัล ANGULAR -UI ... เพียงแค่วางโค้ดในไฟล์ css และโหลดในหน้า ... angular-ui.github.io/bootstrap/#/modal ... ตัวอย่างการรันที่plnkr.co / edit / GYmc9s? p = แสดงตัวอย่าง

— Marcello de Sales

1

สุดยอดโซลูชั่นนี้ใช้งานได้ดีใน 2.3.2 bootstrap และ MAIN ใน internet explorer 8,9,10 !!!! วิธีแก้ปัญหาด้วยมาร์จิ้นซ้าย: -40% ไม่ถูกต้องใน internet explorer !!!

— Cioxideru

41

ใน Bootstrap 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>

— Tum
แหล่งที่มา

เพิ่มไปยังคำตอบของฉัน :)

— Tum

3

นี่ควรจะเป็นคำตอบที่ดีที่สุดเหรอ? ฉันคิดว่าคำตอบยอดนิยมจะช่วยให้คุณปรับแต่งได้ แต่ส่วนใหญ่ใช้กรณีที่ควรจะพึงพอใจโดยเรียน inbuilt ของ Bootstrap

— WebSpanner

ฉันใช้ Bootstrap 3.x และดูเหมือนว่าฉันจะไม่มีmodal-mdคลาส

— James Poulose

34

สำหรับต่อไปBootstrap 3นี้เป็นวิธีการทำ

เพิ่มmodal-wideสไตล์ให้กับมาร์กอัป HTML ของคุณ (ดัดแปลงจากตัวอย่างใน Bootstrap 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 -->

และเพิ่ม CSS ต่อไปนี้

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

ไม่มีความจำเป็นที่จะแทนที่เป็นmargin-leftในBootstrap 3การได้รับนี้จะเป็นศูนย์กลางในขณะนี้

— เดฟแซก
แหล่งที่มา

3

เพียงเพื่อหลีกเลี่ยงความสับสนไม่มีเหตุผลทางเทคนิคในการเพิ่มmodal-wideคลาสซึ่งหมายความว่าไม่ใช่คลาส "ภายใน" Bootstrap คุณสามารถทำได้#myModal .modal-dialog { width: 80%; }

— กาวิน

1

อ๋อ แต่การทำตามสไตล์ทำให้สามารถใช้งานได้อีกครั้ง

— Dave Sag

2

ใช่ฉันเข้าใจ มีหลายครั้งที่ความแตกต่างระหว่างคลาสบูตสแตรปกับคลาสที่กำหนดเองยากมากดังนั้นฉันจึงต้องการจดบันทึก

— กาวิน

20

ในBootstrap 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>

ขยายตัวอย่างข้อมูล

— Alupotha
แหล่งที่มา

คุณรู้วิธีการเปลี่ยนความสูงเป็นกิริยาช่วยหรือไม่? ขอบคุณสำหรับคำตอบของคุณก็ทำงานเช่นเสน่ห์ :)

— FrenkyB

17

คำตอบถูกนำมาจากหน้านี้

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

— โรมัน
แหล่งที่มา

15

ใน v3 ของ Bootstrap มีวิธีง่าย ๆ ในการทำให้ modal ใหญ่ขึ้น เพียงเพิ่ม class modal-lgถัดจาก modal-dialog

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

— เดฟ
แหล่งที่มา

ทำไมต้องโหวตลง! มันเป็นอย่างนั้นและหมดจดทำให้ฉันมีกล่องโต้ตอบที่กว้างดี! และใช้คลาสบูตสแตรปที่ "เหมาะสม" เท่านั้น!

— เดฟ

ลองดึงองค์ประกอบ HTML บางส่วนของคุณกลับมา - ใช้โครงสร้างที่ง่ายที่สุดที่คุณสามารถทำได้เพื่อทดสอบ

— เดฟ

13

Bootstrap 3: เพื่อรักษาคุณสมบัติตอบสนองสำหรับอุปกรณ์ขนาดเล็กและขนาดเล็กฉันได้ทำสิ่งต่อไปนี้:

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

— user2823201
แหล่งที่มา

มันถูก. มันใช้งานได้สำหรับฉัน อย่าลืมเปลี่ยนคุณสมบัติ width เป็น XX% สำหรับเค้าโครงที่ตอบสนองได้ Btw รุ่นในกรณีของฉันคือ 3.0.3

— Jerry Chen

7

นี่คือสิ่งที่ฉันทำใน custom.css ของฉันฉันเพิ่มบรรทัดเหล่านี้และนั่นคือทั้งหมด

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

เห็นได้ชัดว่าคุณสามารถเปลี่ยนขนาดของความกว้าง

— clarenswd
แหล่งที่มา

7

หาก Bootstrap> 3 เพียงแค่เพิ่มสไตล์ให้กับ modal ของคุณ

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

— Sreekanth Karini
แหล่งที่มา

6

ฉันพบโซลูชันนี้ที่ใช้งานได้ดีกว่าสำหรับฉัน คุณสามารถใช้สิ่งนี้:

$('.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

— PedroSaiz
แหล่งที่มา

5

FYI Bootstrap 3 จัดการคุณสมบัติด้านซ้ายโดยอัตโนมัติ ดังนั้นเพียงแค่เพิ่ม CSS นี้จะเปลี่ยนความกว้างและทำให้มันอยู่กึ่งกลาง:

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

— กาวิน
แหล่งที่มา

ทำงานเพื่อ B3! ขอบคุณมาก!

— Bagata

4

รักษาการออกแบบที่ตอบสนองตั้งค่าความกว้างตามที่คุณต้องการ

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

ง่าย ๆ เข้าไว้.

— obfk
แหล่งที่มา

4

การเปลี่ยนแปลงระดับที่model-dialogคุณสามารถบรรลุผลที่คาดหวัง ลูกเล่นเล็ก ๆ เหล่านี้เหมาะกับฉัน หวังว่ามันจะช่วยคุณแก้ปัญหานี้

.modal-dialog {
    width: 70%;
}

— Faisal
แหล่งที่มา

3

ด้วย Bootstrap 3 สิ่งที่จำเป็นต้องมีคือค่าเปอร์เซ็นต์ที่กำหนดให้กับ modal-dialog ผ่าน CSS

CSS

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

— Nav
แหล่งที่มา

1

ใช่มีดโกนของ Occam ไปที่อันนี้ ทดสอบบน 3.0 ใช้งานได้ดี

— Gui de Guinetik

3

ฉันใช้ CSS และ jQuery ร่วมกับคำแนะนำในหน้านี้เพื่อสร้างความกว้างและความสูงของของเหลวโดยใช้ Bootstrap 3

ขั้นแรกให้ CSS บางตัวจัดการความกว้างและแถบเลื่อนที่เป็นตัวเลือกสำหรับพื้นที่เนื้อหา

.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-using-bootstrap-3/

— Scott Dawson
แหล่งที่มา

3

ในBootstrap 3ด้วย CSS คุณสามารถใช้:

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

สิ่งนี้ช่วยให้มั่นใจได้ว่าคุณจะไม่ทำลายการออกแบบของหน้าเพราะเราใช้.modal-dialogแทน.modalซึ่งจะใช้กับการแรเงา

— saadel
แหล่งที่มา

2

ลองใช้สิ่งต่อไปนี้ (ดูตัวอย่าง 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>

— periklis
แหล่งที่มา

2

แทนที่จะใช้เปอร์เซ็นต์เพื่อทำให้การตอบสนองโมดัลฉันพบว่าสามารถควบคุมได้มากขึ้นจากการใช้คอลัมน์และองค์ประกอบการตอบสนองอื่น ๆ ที่มีอยู่แล้วใน bootstrap

ในการทำให้คำตอบเป็นกิริยาช่วย / ขนาดของจำนวนคอลัมน์ใด ๆ :

1) เพิ่ม div พิเศษรอบ div modal-dialog div ด้วยคลาสของ. container -

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

2) เพิ่ม CSS เล็กน้อยเพื่อให้เต็มความกว้าง modal -

.modal-dialog {
    width: 100% }

3) หรือเพิ่มคลาสพิเศษหากคุณมี modals อื่น ๆ -

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

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

4) เพิ่มในแถว / คอลัมน์ถ้าคุณต้องการ modal ขนาดต่างๆ -

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

— อเล็กซ์
แหล่งที่มา

2

เพิ่มสิ่งต่อไปนี้ในไฟล์ css ของคุณ

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

— Kismet
แหล่งที่มา

2

ใช้สคริปต์ด้านล่าง:

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

  overflow-y: scroll;
}

ตัวอย่าง :

การสาธิตเกี่ยวกับ GIF

— Janusz Ładecki
แหล่งที่มา

2

ฉันแก้ไขมันสำหรับ Bootstrap 4.1

การผสมผสานของโซลูชั่นที่โพสต์ก่อนหน้านี้

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

ขยายตัวอย่างข้อมูล

— Patricio Moraga
แหล่งที่มา

1

บรรลุผลตามที่คาดหวังไว้โดยใช้

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

— Aamir
แหล่งที่มา

1

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

แจ้งให้ทราบล่วงหน้าฉันได้เพิ่ม. jobeeModal class ใน div ที่สอง จากนั้นสไตล์คลาสนั้น

.employeeModal{
        width: 700px;
    }

— เป็นกลาง
แหล่งที่มา

0

ฉันใช้วิธีนี้และมันสมบูรณ์แบบสำหรับฉัน

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

— Belal mazlom
แหล่งที่มา

0

โซลูชันที่ใช้น้อยลง (ไม่ใช่ js) สำหรับ Bootstrap 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);
}

— sinelaw
แหล่งที่มา

0

ฉันใช้ 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; }
}

— Rodolfo Jorge Nemer Nogueira
แหล่งที่มา

0

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

— NK Chaudhary
แหล่งที่มา

ฉันจะเปลี่ยนความกว้างเริ่มต้นของกล่อง Modal Bootstrap Twitter ได้อย่างไร

CSS