আমি কীভাবে একটি টুইটার বুটস্ট্র্যাপ মডেল বক্সের ডিফল্ট প্রস্থ পরিবর্তন করতে পারি?

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

— অন ​​ফ্লাই

Answer 1

হালনাগাদ:

ইন bootstrap 3আপনি মোডাল-ডায়ালগ পরিবর্তন করতে হবে। সুতরাং এই ক্ষেত্রে আপনি modal-adminযেখানে modal-dialogদাঁড়িয়ে সেখানে ক্লাস যুক্ত করতে পারেন ।

আসল উত্তর (বুটস্ট্র্যাপ <3)

আপনি জেএস / জিকুয়ের সাথে এটি পরিবর্তন করার চেষ্টা করছেন এমন কোনও কারণ রয়েছে?

আপনি কেবলমাত্র সিএসএস দিয়ে এটি সহজেই করতে পারবেন যার অর্থ ডকুমেন্টে আপনার স্টাইলিং করতে হবে না। আপনার নিজস্ব কাস্টম সিএসএস ফাইলে, আপনি যুক্ত করুন:

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

আমি নির্বাচককে সামনে রাখার কারণটি এটি ডিফল্টের চেয়ে বেশি অগ্রাধিকার নেয়। এইভাবে আপনি এটি কোনও কাস্টম সিএসএস ফাইলে যুক্ত করতে পারবেন এবং উদ্বেগ ছাড়াই বুটস্ট্র্যাপ আপডেট করুন।

Comments

@ নিকএনকে আরও ভাল (প্রতিক্রিয়াশীল) উত্তরের জন্য নীচে স্ক্রোল করুন!

— অনফ্লাই

@ ফ্লাইটিং রক আপনি এটিকে প্রতিক্রিয়াশীল করতে পারেন, আমার উত্তরটি দেখুন

— নিক এন।

@NickN। হত্যাকারী! ধন্যবাদ নিক

— ভাসমান রক

বুটস্ট্র্যাপ 3 এটি সহজ করে তোলে। .modal .modal-dialog { width: 800px; }বাম অবস্থানটি স্বয়ংক্রিয়ভাবে গণনা করা হয়।

— গাভিন

আসলে, এটি আমার পক্ষে কাজ করে না। @ জিমসিস্টেম মন্তব্যে সমাধানটি কৌশলটি করেছে।

— টনজো

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

এটি খুব সংকীর্ণ স্ক্রিনে মডেলটি পর্দার অর্ধেক বন্ধ হতে পারে বলে মনে হচ্ছে seems

— cofiem

কফি, এটি ঠিক করতে একটি মিডিয়া ক্যোয়ারী ব্যবহার করুন

— নিক এন।

@NickN। আমার মিডিয়া ক্যোয়ারী এটি ঠিক করে নি। আপনি একটি উদাহরণ যোগ করতে পারেন? উপেক্ষা করুন, আমি এটি পেয়েছি। আমার ন্যূনতম প্রস্থের পরিবর্তে সর্বোচ্চ-প্রস্থ ছিল। @media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }

— এইচপিডাব্লুডি

আমি দেখতে পেয়েছি যে ইতিমধ্যে বুটস্ট্র্যাপে অন্তর্নির্মিত কলামগুলি ব্যবহার করে ঠিক% ব্যবহার করা যথেষ্ট নিয়ন্ত্রণ দেয় না।

— অ্যালেক্স

@ অ্যালেক্স আমি মনে করি এটি আপনাকে আরও নিয়ন্ত্রণ দেয়, আপনি কীভাবে বিদ্যমান কলামগুলি দিয়ে এটি করবেন?

— নিক এন।

Answer 3

আপনি যদি বুটস্ট্র্যাপ 3 ব্যবহার করেন তবে আপনাকে মোডাল-ডায়লগ ডিভ পরিবর্তন করতে হবে এবং মোডাল ডিভের মতো এটি গ্রহণযোগ্য উত্তরে প্রদর্শিত হবে না। এছাড়াও, বুটস্ট্র্যাপ 3 এর প্রতিক্রিয়াশীল প্রকৃতি ধরে রাখতে, মিডিয়া ক্যোয়ারী ব্যবহার করে ওভাররাইড সিএসএস লেখা গুরুত্বপূর্ণ, যাতে মডেলগুলি ছোট ডিভাইসে পূর্ণ প্রশস্ত হয়।

বিভিন্ন প্রস্থের সাথে পরীক্ষা করতে এই জেএসফিডলটি দেখুন ।

এইচটিএমএল

<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

বুটস্ট্রা 3-র জন্য সঠিক করুন। মার্জিনকে মানিয়ে না নিয়েই কাজ করে! thx

— SQueek

আমি উত্তরে আইডি বৈশিষ্ট্যটি সরিয়েছি কারণ এটি প্রয়োজনীয় নয়।

— arcdegree

এটি কাজ করে তবে এটি মিলুনয়ে বা ডেভের উত্তর হিসাবে প্রতিক্রিয়াশীল নয়।

— ksiomelo

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%, ভিতরে থাকা সামগ্রীর উপর নির্ভরশীল শতাংশ।

— bool.dev

আমি .modal.fade.in বিধিটি বাদ দিলে এটি আমার পক্ষে ভাল কাজ করে, যা বুটস্ট্র্যাপ ভি ২.২.২ এর মোডালটিকে নীচে নিয়ে যায়।

— রামিরো

এটি আংগুলার-ইউআই মডেলের উদাহরণ সহ কাজ করেছে ... কেবলমাত্র একটি সিএসএস ফাইলে কোডটি ফেলে দিন এবং পৃষ্ঠাতে লোড করুন ... কৌণিক-ui.github.io/bootstrap/#/modal ... plnkr.co

— মার্সেলো ডি বিক্রয়

দুর্দান্ত এই সমাধানটি ইন্টারনেট এক্সপ্লোরার ২.৩.২ বুটস্ট্র্যাপ এবং মেইন 8,9,10 এ ভাল কাজ করে !!!! মার্জিন-বাম সহ সমাধান: -40% ইন্টারনেট এক্সপ্লোরারটিতে ভুল!

— সিওক্সিডু

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আপনার এইচটিএমএল মার্কআপে একটি শৈলী যুক্ত করুন ( বুটস্ট্র্যাপ 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

আপনি কীভাবে মডেল উচ্চতা পরিবর্তন করবেন জানেন? আপনার উত্তরের জন্য ধন্যবাদ, এটি একটি

— মোহন

Answer 8

সমাধানটি এই পৃষ্ঠা থেকে নেওয়া হয়েছিল

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

Answer 9

বুটস্ট্র্যাপের ভি 3-তে একটি মডেলকে আরও বড় করার সহজ পদ্ধতি রয়েছে। কেবলমাত্র মডেল-ডায়ালগের পাশে ক্লাস মডেল-এলজি যোগ করুন ।

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

কেন ডাউন ভোট ?! এটি একেবারে এবং পরিষ্কারভাবে আমাকে একটি দুর্দান্ত প্রশস্ত ডায়ালগ বক্স দিয়েছে! এবং শুধুমাত্র "যথাযথ" বুটস্ট্র্যাপ ক্লাস ব্যবহার করে!

— ডেভ

আপনার এইচটিএমএল উপাদানগুলির কয়েকটি আবার ট্রিপ করার চেষ্টা করুন - এটির পরীক্ষা করার জন্য আপনি করতে পারেন এমন সহজ কাঠামোটি ব্যবহার করুন।

— ডেভ

Answer 10

বুটস্ট্র্যাপ 3: ছোট এবং অতিরিক্ত ছোট ডিভাইসগুলির জন্য প্রতিক্রিয়াশীল বৈশিষ্ট্যগুলি বজায় রাখতে আমি নিম্নলিখিতগুলি করেছি:

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

Comments

এটা ঠিক. এটা আমার জন্য কাজ করে। প্রতিক্রিয়াপূর্ণ বিন্যাসের জন্য প্রস্থের সম্পত্তিটি XX% এ পরিবর্তন করতে ভুলবেন না। বিটিডব্লিউ, আমার ক্ষেত্রে সংস্করণটি 3.0.3

— জেরি চেন

Answer 11

এটিই আমি করেছি, আমার কাস্টম.কম-এ আমি এই লাইনগুলি যুক্ত করেছি এবং এটিই ছিল।

.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

এফওয়াইআই বুটস্ট্র্যাপ 3 বাম সম্পত্তিটি স্বয়ংক্রিয়ভাবে পরিচালনা করে। সুতরাং কেবল এই সিএসএস যুক্ত করলে প্রস্থ পরিবর্তন হবে এবং এটি কেন্দ্রীভূত থাকবে:

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

Comments

বি 3 এর জন্য কাজ করেছেন! অনেক ধন্যবাদ!

— বাগটা

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

আমি বুটস্ট্র্যাপ 3 ব্যবহার করে তরল প্রস্থ এবং উচ্চতা তৈরি করতে এই পৃষ্ঠায় ইঙ্গিতগুলি সহ CSS এবং jQuery এর সংমিশ্রণটি ব্যবহার করেছি।

প্রথমে সামগ্রীগুলির জন্য প্রস্থ এবং alচ্ছিক স্ক্রোলবারটি পরিচালনা করতে কিছু সিএসএস

.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/ এ সম্পূর্ণ লিখন-আপ এবং কোড

Answer 19

ইন বুটস্ট্র্যাপ 3 CSS এর সঙ্গে আপনি কেবল ব্যবহার করতে পারেন:

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 class="container">
    <div class="modal-dialog">
    </div>
</div>

2) মডেল পূর্ণ প্রস্থ তৈরি করতে একটি সামান্য CSS যুক্ত করুন -

.modal-dialog {
    width: 100% }

3) অন্য কোনও মডেল থাকলে বিকল্পভাবে অতিরিক্ত শ্রেণিতে যুক্ত করুন -

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

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

৪) আপনি বিভিন্ন আকারের মডেলগুলি চাইলে একটি সারি / কলামগুলিতে যুক্ত করুন -

<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 ক্লাস যুক্ত। তারপরে সেই ক্লাসটি স্টাইল করুন।

.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

আমি এসসিএসএস এবং সম্পূর্ণ প্রতিক্রিয়াশীল মডেল ব্যবহার করেছি:

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