বুটস্ট্র্যাপ মডেল প্রস্থ কীভাবে বাড়ানো যায়?

Question

আমি এই চেষ্টা করেছি কিন্তু ভুল হয়ে গেছে

এখানে সিএসএস

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

এবং এখানে ব্যর্থ ফলাফল

Comments

বুটস্ট্র্যাপে আপনি ছোট এবং বড় আকারের জন্য মডেল-এসএম, মডেল-এলজি ব্যবহার করতে পারেন।

— লিও সিংহ

আপনি কি আপনার নির্দিষ্ট এইচটিএমএল এবং সিএসএস কোড ভাগ করতে পারেন। কিছু শৈলী

— ওভাররেড করা

আপনি কি আপনার পুরো কোডটি ভাগ করতে পারেন বা এই উদাহরণটি দেখতে পারেন, এই মডেলের প্রস্থটি পরিবর্তনযোগ্য হতে পারে। w3schools.com/bootstrap/…

— হার দেবগুন

@ হারদেবগুন দয়া করে ব্যাখ্যা করুন যে সেই উদাহরণে কেউ মডেলের আকার পরিবর্তন করতে পারে? এটি সাধারণ, ডেমো, স্থির আকারের মডেল ছাড়া আর কিছুই নয়।

— অধ্যাপক

Answer 1

আপনার কোডে, modal-dialogডিভের জন্য, অন্য শ্রেণি যুক্ত করুন modal-lg:

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

অথবা আপনি যদি আপনার মডেল কথোপকথনটি কেন্দ্র করতে চান তবে ব্যবহার করুন:

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

Comments

কাজ করিনি আমাকে সিএসএস ব্যবহার করতে হয়েছিল। width: 80%

— webNoob13

@ ওয়েবনুব 13 গ্রেট, ধন্যবাদ। তবে আপনার সমস্যাটি সম্পূর্ণ আলাদা হতে পারে। এই উত্তরটি লেখা হয়েছিল 5 বছর আগে। এমনকি আপনার মামলার জন্য বৈধ হতে পারে না। দয়া করে তাদের বিবেচনা করুন।

— প্রবীণ কুমার পুরুষোথমন

Answer 2

সবচেয়ে সহজ উপায়টি ডিভের উপর ইনলাইন স্টাইল হতে পারে modal-dialog:

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

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

Comments

সমস্ত প্রতিক্রিয়াশীল এন সব সম্পর্কে হট্টগোল সম্পর্কে কি?

— অভিনব সিং

@ অভিনব সিং: আপনি ঠিক বলেছেন। হার্ড-কোড পিক্সের মান বাঞ্ছনীয় নয়। শতাংশ বা ক্যালক প্রস্তাবিত হয়।

— ভাবছেন

প্রতিক্রিয়াশীল: প্রস্থ: 100%; সর্বোচ্চ-প্রস্থ: 1250px

— ক্ল্যামচোদা

Answer 3

আমার ক্ষেত্রে,

1. মডেলে স্থিতিশীল প্রস্থ দেওয়া প্রতিক্রিয়াটিকে আঘাত করে।
2. modal-lgবর্গ ওয়াইড যথেষ্ট ছিল না।

সুতরাং সমাধান ছিল

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

এবং পরিবর্তে উপরে বর্গ ব্যবহার modal-lgবর্গ

Comments

কোন আগের ক্লাস দয়া করে?

— জন সর্বোচ্চ

@ জনম্যাক্স তার অর্থ "উপরের শ্রেণিটি ব্যবহার করুন"

— মিঃ হিলিস

Answer 4

আপনি মধ্যে নির্বাচন করতে পারবেন modal-lgএবং modal-xlক্লাস অথবা আপনি কাস্টম চান তাহলে প্রস্থ তারপর, ইনলাইন সিএসএস দিয়ে সর্বোচ্চ প্রস্থ সম্পত্তি সেট। উদাহরণ স্বরূপ,

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

বা

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

Comments

এটি দুর্দান্ত @ সুমোদ বাছাপে কাজ করেছে। আমি 'মডেল-এলজি' ক্লাসটি সরিয়ে সর্বাধিক প্রস্থ: 80% রেখেছি এবং এটি কৌশলটি করেছে!

— সোটিরিস জেজিয়ানিস

Answer 5

বুটস্ট্র্যাপ 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 6

বুটস্ট্র্যাপে, এর ডিফল্ট প্রস্থ modal-dialogহয় 600px। তবে আপনি স্পষ্টভাবে এর প্রস্থ পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, আপনি যদি তার প্রস্থটিকে আপনার পছন্দসই মানের সাথে সর্বাধিক করতে চান, 800pxউদাহরণস্বরূপ, আপনি নিম্নলিখিত হিসাবে করেন:

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

দ্রষ্টব্য : এই পরিবর্তনটি আপনি আপনার অ্যাপ্লিকেশনটিতে ব্যবহার করেন এমন সমস্ত মডেল ডায়ালগের জন্য সেট করে। এছাড়াও, আমার পরামর্শটি হল আপনার নিজের সিএসএস বিধিগুলি সংজ্ঞায়িত করা এবং ফ্রেমওয়ার্কের মূলটি স্পর্শ না করা ভাল best

আপনি যদি কেবলমাত্র এটি নির্দিষ্ট মডেল ডায়ালগের জন্য সেট করতে চান তবে নীচের মতো আপনার প্রচ্ছদ শ্রেণীর নাম 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

মডেলের প্রস্থ বৃদ্ধি করার সময় আমি একই সমস্যার মুখোমুখি হয়েছি, উইন্ডোটি মাঝখানে প্রদর্শিত হচ্ছে না। প্রায় কাজ করার পরে আমি নীচের সমাধানটি পেয়েছি।

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

যদি এটি আপনার পক্ষে কাজ করে তবে ভোটটি ছেড়ে দিন। শুভ কোডার্স!

Answer 9

যদি আপনি মডেল প্রতিক্রিয়া ব্যবহার পিক্সেলের পরিবর্তে% প্রস্থের রাখতে চান। আপনি এটি ইন-লাইন (নীচে দেখুন) বা সিএসএস সহ করতে পারেন।

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

আপনি যদি সিএসএস ব্যবহার করেন, আপনি এমনকি মডেল-এসএম এবং মডেল-এলজি জন্য বিভিন্ন% করতে পারেন।

Answer 10

আসলে, আপনি মডেল ডিভিএসে সিএসএস প্রয়োগ করছেন।

আপনাকে .modal- কথোপকথনে 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 আপনার কোড, মডেল-ডায়লগ ডিভের জন্য, অন্য শ্রেণি যুক্ত করুন, মডেল-এলজি:

মডেল-এক্সএল ব্যবহার করুন

Comments

অন্যের জবাবটি অনুলিপি করবেন না

— রায় তালহা রেহমান খান

Answer 13

আমি মনে করি যে মডেলটির সর্বোচ্চ প্রস্থ 500px সেট হয়ে যাওয়ার কারণে এবং মডেল-এলজি-এর সর্বোচ্চ-প্রস্থ 800px হয় বলে আমি মনে করি এটি অটোতে সেট করা আপনার মডেলকে প্রতিক্রিয়াশীল করে তুলবে

Answer 14

আমি জানি এটি পুরানো, তবে যে কারও দিকে তাকিয়ে আপনার এখন সর্বাধিক প্রস্থের সম্পত্তি সেট করা দরকার।

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

Answer 15

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

মার্জিন বামের মান মডেলের প্রস্থের অর্ধেক। ক্লাস না থাকায় আমি এটি मारুটি অ্যাডমিন থিমের সাথে ব্যবহার করছি.modal-lg .modal-sm