বুটস্ট্র্যাপ গ্রিড সিস্টেম সহ সারি সারি?

Question

আমি এর মতো 2x2 ফর্ম্যাটে 4 টি ছোট চিত্র সহ 1 টি বৃহত্তর চিত্র চাই:

আমার প্রাথমিক চিন্তাটি ছিল সমস্ত কিছু এক সারিতে রাখা। তারপরে দুটি কলাম তৈরি করুন এবং দ্বিতীয় কলামে 1x1 এবং 2x2 প্রভাব তৈরি করতে দুটি সারি এবং দুটি কলাম তৈরি করুন।

তবে এটি সম্ভব বলে মনে হচ্ছে না, বা আমি ঠিক এটি সঠিকভাবে করছি না?

Comments

আপনি এতক্ষণ যে HTML / সিএসএস চেষ্টা করেছেন তা পোস্ট করুন।

— স্টিভ স্যান্ডার্স

এটি ব্যবহার করে দেখুন: jsfiddle.net/KXje2/9 আমি অতিরিক্ত ছোট পর্দার মাধ্যমে বৃহত্তর জন্য উপযুক্ত হতে আমার ফিডল সম্পাদনা করেছি।

— BuddhistBeast

তোমার জন্য উপরের কোড কাজ কি ...?

— BuddhistBeast

Answer 1

বুটস্ট্র্যাপ সংস্করণ 3.x

সর্বদা হিসাবে, বুটস্ট্র্যাপের দুর্দান্ত ডকুমেন্টেশন পড়ুন:

3.x ডক্স : https://getbootstrap.com/docs/3.3/css/#grid- নেস্টিং

.containerমৌলিক স্তরের সারিটি কোনও উপাদানের ভিতরে রয়েছে তা নিশ্চিত করুন । আপনি যখনই সারি বাসাতে চান, কেবল .rowআপনার কলামের ভিতরে একটি নতুন অংশ খুলুন ।

এখান থেকে কাজ করার জন্য একটি সাধারণ বিন্যাস এখানে:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

বুটস্ট্র্যাপ সংস্করণ 4.0

4.0 ডক্স : http://getbootstrap.com/docs/4.0/layout/grid/# নেস্টিং

এখানে 4.0 এর জন্য একটি আপডেট সংস্করণ রয়েছে তবে গ্রিডে আপনার পুরো ডক্স বিভাগটি সত্যই পড়া উচিত যাতে আপনি এই শক্তিশালী বৈশিষ্ট্যটি কীভাবে উপার্জন করতে হয় তা বুঝতে পারবেন

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

ফিডল ডেমো jsFood 3.x | jsFiddle 4.0

যা দেখতে এটির মতো লাগবে ( কিছুটা স্টাইলিং যুক্ত করে ):

Comments

1 বছরের পুরানো থ্রেড হাইজ্যাক করার জন্য দুঃখিত, তবে আপনি কীভাবে চিত্র এবং 1 এবং 3 এর মধ্যে 0 পিএক্স পেতে পারেন তা জানুন

— অ্যালেক্স

@ অ্যালেক্স, নিশ্চিত - সবেমাত্র উপাদানটি সেট margin: 0;করুন .mini-box। আমার উদাহরণটি কেবল স্পষ্টতার জন্য একটি যুক্ত করেছিল, তবে আপনি কেবল লাইনটি পুরোপুরি সরাতে পারেন। এখানে একটি ডেমো রয়েছে

— কাইলিমিট

মিনিবক্স 2 এর জন্য কর্ন এবং মিনিবাস 3 এর জন্য করের মধ্যে কেন সারি নেই? এবং সেখানে কি হবে?

— পশুট করুন

@ পাশুট, বুটস্ট্র্যাপ 3 গ্রিড দেখুন, এটি কি এক্ষেত্রে কতগুলি কলাম কলামে সত্যই তা বিবেচনা করে ? । প্রতিটি মিনি বাক্স উপলব্ধ স্থানের 50% (কলাম দ্বারা সীমাবদ্ধ) নেয় তাই দু'জন প্রথম সারিতে কাজ করবে। যে কোনও অতিরিক্ত ব্যক্তি কেবল একটি নতুন লাইনে গুটিয়ে দেবে। আপনি করতে পারেন এছাড়াও সারিতে তাদের প্রতিটি পেয়ার, কিন্তু আপনি প্রয়োজন হবে না। ডিফল্টরূপে বুটস্ট্র্যাপ মোড়ানো হয় যাতে আপনাকে নতুন সারিগুলির সাথে আপনার মার্কআপটিকে বিশৃঙ্খলা করতে হবে না। যদি এটি শব্দার্থগতভাবে অর্থবহ হয় তবে আমি এটির জন্য বলব। তবে আপনি যদি কেবল 4 টি অবজেক্টের একটি তালিকা প্রদর্শন করেন তবে সেগুলি একই সারিতে রাখুন।

— কাইলমিট

@ ব্যবহারকারী 392121890, এটি একটি মন্তব্য লাইনে উত্তর দেওয়ার জন্য খুব বড় একটি বিষয়। আপনি কী করার চেষ্টা করছেন এবং এটি করার জন্য কমপক্ষে একটি চেষ্টা করে একটি নতুন থ্রেড পোস্ট করতে পারেন এবং তারপরে এখানে লিঙ্ক করতে পারেন।

— কাইলমিট

Answer 2

@ কাইলমিট যা বলেছেন তাতে যুক্ত করে, ব্যবহারটি বিবেচনা করুন:

• col-md-* বৃহত্তর বাইরের কলামগুলির জন্য ক্লাস
• col-xs-* ছোট অভ্যন্তরীণ কলামগুলির জন্য ক্লাস

আপনি যখন বিভিন্ন স্ক্রিন আকারে পৃষ্ঠাটি দেখেন এটি কার্যকর হবে।

একটি ছোট স্ক্রিনে, যদি সম্ভব হয় তবে ছোট বড় অভ্যন্তরীণ কলামগুলি বজায় রাখার পরে আরও বড় বাহ্যিক কলামগুলির মোড়ক ঘটবে