একাধিক সারি বিস্তৃত করতে আমি কীভাবে বুটস্ট্র্যাপ কলাম পেতে পারি?

Question

আমি বুটস্ট্র্যাপের সাহায্যে নিম্নলিখিত গ্রিডটি কীভাবে করব তা বোঝার চেষ্টা করছি।

আমি নিশ্চিত নই যে আমি কীভাবে বাক্সটি তৈরি করব (নম্বর 1) যা দুটি সারি বিস্তৃত হবে। বাক্সগুলি যেভাবে সাজানো হয়েছে সেগুলি প্রোগ্রামগতভাবে তৈরি করা হয়। বক্স 1 একটি স্বাগত বার্তা।

এটির সাথে যাওয়ার সর্বোত্তম পথে কোনও ধারণা?

Comments

twitter.github.io/bootstrap/scaffolding.html#gridSystem , আপনি বুটস্ট্র্যাপ গ্রিডসিস্টেম বাসাতে পারেন।

— দি হিপ্পো

সুতরাং 3 টির পরিবর্তে 2 টি সারি তৈরি করুন, প্রথম সারিতে 2 টি সারি বাসা বাঁধবেন? বাক্সগুলি ক্রমাগতভাবে তৈরি করা হলে এটি সমস্যাযুক্ত হতে পারে।

— জেমস জেফারি

ধারণা নেই এটি কাজ করবে কিনা তবে pull-leftসমস্ত বাক্সে ক্লাস যুক্ত করবে ? এটি বাক্স 1টিকে 2 + 4 এর মতো উচ্চতা তৈরি করবে না, আপনি যখন উচ্চতা সেট করবেন তখন এটিকে কাজ করার অনুমতি দেওয়া উচিত।

— হাইলউড

হেইলউড, উত্তর হিসাবে আপনি যদি পারেন তবে রাখুন, না হলে আমি আমার কোডটি পেস্ট করব। এটি কাজ করেছে ... কমপক্ষে ক্রোমে। অন্যান্য ব্রাউজারে এটি পরীক্ষা করা দরকার।

— জেমস জেফারি

@ হেলউড ইনফ্যাক্ট, কোনও টানা বাম দরকার নেই। প্রথম উপাদানটির উপর একটি উচ্চতা নির্ধারণ কাজ করে।

— জেমস জেফারি

Answer 1

বুটস্ট্র্যাপ 3 এর জন্য:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>

বুটস্ট্র্যাপ 2 এর জন্য:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row-fluid">
    <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>
    <div class="span8">
        <div class="row-fluid">
            <div class="span6"><div class="well">2</div></div>
            <div class="span6"><div class="well">3</div></div>
        </div>
        <div class="row-fluid">
            <div class="span6"><div class="well">4</div></div>
            <div class="span6"><div class="well">5</div></div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <div class="well">6</div>
    </div>
    <div class="span4">
        <div class="well">7</div>
    </div>
    <div class="span4">
        <div class="well">8</div>
    </div>
</div>

জেএসফিডেলের ডেমোটি দেখুন (বুটস্ট্র্যাপ 2): http://jsfiddle.net/SxcqH/52/

Comments

একটি বক্স বাড়ার সাথে সাথে আপনি কীভাবে চারটি এবং পাঁচটি বাক্স তৈরি করতে পারেন?

— ইমরান এনজেড

stackoverflow.com/questions/19695784/...

— Mastergalen

এটি উদাহরণস্বরূপ বেশ কাজ করে না, প্রথম কলামের নীচের প্রান্তটি বাকী অংশের সাথে সামান্য মিস্যালাইনড।

— জ্যাককালিশ

এটি একটি দুর্দান্ত উত্তর, তবে কী যদি বাক্স 5 এর পাশাপাশি 3 সারিটি প্রসারিত করার প্রয়োজন হয়, এবং আরও, গতিশীলভাবে?

— মিশায়েল

@ মিশায়েল এটি বেশ সহজ, বাক্স 1 এর জন্য তিনি যা করেছিলেন কেবল তা করুন এবং বাক্স 3/5 এ প্রয়োগ করুন। সমান আকারের 3 টি কলাম থাকতে হবে, বাইরের একের মধ্যে কেবল 1 টি সারি থাকবে, একটি ভিতরে দুটি সারিতে থাকবে।

— নাথান উইলিয়ামস

Answer 2

মতামত মতামত মত, সমাধান নেস্টেড স্প্যানস / সারি ব্যবহার করা হয়।

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>

Answer 3

নীচের উদাহরণটি মনে হয়েছিল কাজ করে। প্রথম উপাদানটির উপরে কেবল একটি উচ্চতা নির্ধারণ করা

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

আমি সাহায্য করতে পারছি না তবে ভেবেছি এটি একটি সারির ভুল ব্যবহার।

Answer 4

আমি বিশ্বাস করি যে সারিগুলি কীভাবে বিস্তৃত করা যায় সে সম্পর্কে অংশটির পুঙ্খানুপুঙ্খভাবে জবাব দেওয়া হয়েছে (অর্থাত্ নেস্ট সারি দ্বারা), তবে আমি আমার নীড়যুক্ত সারিগুলি তাদের পাত্রে ভরাট না করে দেওয়ার বিষয়টিও ছড়িয়ে দিয়েছি। যদিও ফ্লেক্সবক্স এবং নেতিবাচক মার্জিনগুলি একটি বিকল্প, 2, 3, 4 এবং 5 থাকা বাক্সগুলিতে পূর্বনির্ধারিত h-50শ্রেণিটি ব্যবহার করা অনেক সহজ সমাধান row।

দ্রষ্টব্য: আমি ব্যবহার করছি Bootstrap-4, আমি কেবল ভাগ করতে চেয়েছিলাম কারণ আমি একই সমস্যার মধ্যে পড়েছিলাম এবং এটি আরও মার্জিত সমাধান বলে মনে করেছি :)

Answer 5

<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>