مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
Check
in English

ڪالمن

اسان جي فليڪس باڪس گرڊ سسٽم جي مهرباني سان ترتيب ڏيڻ، ترتيب ڏيڻ، ۽ ترتيب ڏيڻ لاءِ هٿرادو اختيارن سان ڪالمن کي ڪيئن تبديل ڪجي. پلس، ڏسو ته ڪيئن استعمال ڪجي ڪالمن ڪلاسز کي منظم ڪرڻ لاءِ غير گرڊ عناصر جي چوٽي کي منظم ڪرڻ لاءِ.

اٿو! پنھنجي گرڊ ڪالمن کي ڪيئن تبديل ۽ ڪسٽمائي ڪرڻ ۾ ڊائيونگ ڪرڻ کان پھريائين گرڊ پيج پڙھڻ جي پڪ ڪريو.

اهي ڪيئن ڪم ڪن ٿا

  • ڪالمن گرڊ جي فليڪس باڪس آرڪيٽيڪچر تي ٺھيل آھن. Flexbox جو مطلب آھي اسان وٽ انفرادي ڪالمن کي تبديل ڪرڻ ۽ قطار جي سطح تي ڪالمن جا گروپ تبديل ڪرڻ جا اختيار آھن . توهان چونڊيو ته ڪالمن ڪيئن وڌندا، ڇڪيندا، يا ٻي صورت ۾ تبديل ڪندا.

  • جڏهن گرڊ ترتيب ٺاهيندي، سڀ مواد ڪالمن ۾ وڃي ٿو. بوٽ اسٽريپ جي گرڊ جو درجو کنٽينر کان قطار تائين توهان جي مواد تائين ڪالمن تائين وڃي ٿو. ناياب موقعن تي، توھان مواد ۽ ڪالمن کي گڏ ڪري سگھو ٿا، پر ھوشيار ٿي سگھي ٿو غير ارادي نتيجا.

  • بوٽ اسٽريپ ۾ تيز، جوابي ترتيب ٺاهڻ لاءِ اڳواٽ بيان ڪيل ڪلاس شامل آهن. هر گرڊ ٽائر تي ڇهن بريڪ پوائنٽس ۽ درجنين ڪالمن سان ، اسان وٽ اڳ ۾ ئي درجن وارا ڪلاس آهن جيڪي توهان لاءِ ٺاهيل آهن توهان جي گهربل ترتيب ٺاهڻ لاءِ. جيڪڏهن توهان چاهيو ته اهو ساس ذريعي بند ڪري سگهجي ٿو.

ترتيب ڏيڻ

عمودي ۽ افقي طور تي ڪالمن کي ترتيب ڏيڻ لاءِ flexbox alignment افاديت استعمال ڪريو.

عمودي ترتيب

ٽن ڪالمن مان هڪ
ٽن ڪالمن مان هڪ
ٽن ڪالمن مان هڪ
ٽن ڪالمن مان هڪ
ٽن ڪالمن مان هڪ
ٽن ڪالمن مان هڪ
ٽن ڪالمن مان هڪ
ٽن ڪالمن مان هڪ
ٽن ڪالمن مان هڪ
html
<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>
ٽن ڪالمن مان هڪ
ٽن ڪالمن مان هڪ
ٽن ڪالمن مان هڪ
html
<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

افقي ترتيب

ٻن ڪالمن مان هڪ
ٻن ڪالمن مان هڪ
ٻن ڪالمن مان هڪ
ٻن ڪالمن مان هڪ
ٻن ڪالمن مان هڪ
ٻن ڪالمن مان هڪ
ٻن ڪالمن مان هڪ
ٻن ڪالمن مان هڪ
ٻن ڪالمن مان هڪ
ٻن ڪالمن مان هڪ
ٻن ڪالمن مان هڪ
ٻن ڪالمن مان هڪ
html
<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ڪالمن لفافي

جيڪڏهن 12 کان وڌيڪ ڪالمن هڪ قطار ۾ رکيل آهن، اضافي ڪالمن جو هر گروپ، هڪ يونٽ جي طور تي، نئين لائين تي لپي ويندا.

.col-9
.col-4
کان وٺي 9 + 4 = 13 > 12، هي 4-ڪالمن-وائڊ ڊيو هڪ نئين لڪير تي ويڙهجي وڃي ٿو هڪ ملندڙ يونٽ جي طور تي.
.col-6
بعد ۾ ڪالم نئين لائين سان گڏ جاري آھن.
html
<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

ڪالمن جي ڀڃڪڙي

فليڪس باڪس ۾ ڪالمن کي نئين لڪير تي ٽوڙڻ لاءِ هڪ ننڍڙي هيڪ جي ضرورت آهي: هڪ عنصر شامل ڪريو width: 100%جتي توهان چاهيو ٿا ته توهان پنهنجي ڪالمن کي نئين لڪير ۾ لپيٽڻ چاهيو. عام طور تي اهو ڪيترن ئي .rowايس سان پورو ڪيو ويندو آهي، پر هر عمل درآمد جو طريقو هن لاء حساب نه ٿو ڪري سگهي.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
html
<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

توھان پڻ ھن وقف کي لاڳو ڪري سگھو ٿا مخصوص وقفي پوائنٽن تي اسان جي جوابي ڊسپلي يوٽيلٽيز سان .

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
html
<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

ٻيهر ترتيب ڏيڻ

آرڊر ڪلاس

توهان جي مواد جي بصري ترتيب.order- کي ڪنٽرول ڪرڻ لاء ڪلاس استعمال ڪريو . اهي ڪلاس جوابي آهن، تنهنڪري توهان سيٽ ڪري سگهو ٿا بريڪ پوائنٽ طرفان (مثال طور، ). سڀني ڇهن گرڊ سطحن جي ذريعي مدد شامل آهي.order.order-1.order-md-215

پهرين DOM ۾، ڪوبه آرڊر لاڳو نه ٿيو
ٻيو DOM ۾، وڏي آرڊر سان
DOM ۾ ٽيون، 1 جي آرڊر سان
html
<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

اتي پڻ جوابدار .order-first۽ .order-lastطبقا آھن جيڪي ترتيب سان لاڳو ڪرڻ ۽ ترتيب ڏيڻ سان orderھڪڙي عنصر کي تبديل ڪندا آھن. انهن طبقن کي به ضرورت مطابق انگن اکرن سان ملائي سگهجي ٿو .order: -1order: 6.order-*

DOM ۾ پهريون، آخري حڪم ڏنو
DOM ۾ ٻيو، بي ترتيب
DOM ۾ ٽيون، پهريون حڪم ڏنو
html
<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

ڪالمن کي ترتيب ڏيڻ

توھان ٻن طريقن سان گرڊ ڪالمن کي آفسيٽ ڪري سگھو ٿا: اسان جا جوابي .offset-گرڊ ڪلاس ۽ اسان جي مارجن يوٽيلٽيز . گرڊ ڪلاس ڪالمن سان ملائڻ لاءِ ماپيا ويندا آهن جڏهن ته مارجن تيز ترتيبن لاءِ وڌيڪ ڪارآمد هوندا آهن جتي آفسٽ جي چوٽي متغير هوندي آهي.

آفسيٽ ڪلاس

.offset-md-*ڪلاس استعمال ڪندي ڪالمن کي ساڄي طرف منتقل ڪريو . اهي طبقا ڪالمن جي کاٻي پاسي واري مارجن کي ڪالمن جي حساب سان وڌائين ٿا *. مثال طور، چار ڪالمن مٿان .offset-md-4ھلندو آھي..col-md-4

col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
html
<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

جوابي بريڪ پوائنٽس تي ڪالمن کي صاف ڪرڻ جي اضافي ۾، توهان کي آفسيٽس ري سيٽ ڪرڻ جي ضرورت پوندي. گرڊ مثال ۾ هن عمل ۾ ڏسو .

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
html
<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

مارجن افاديت

v4 ۾ flexbox ڏانهن منتقل ٿيڻ سان، توهان مارجن يوٽيلٽيز استعمال ڪري سگهو ٿا جهڙوڪ .me-autoڀائرن جي ڪالمن کي هڪ ٻئي کان پري ڪرڻ لاءِ.

col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
col-auto .me-auto
.col-آٽو
html
<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

اسٽينڊل ڪالمن جا ڪلاس

ڪلاس به استعمال ڪري .col-*سگھجن ٿا a .rowکان ٻاهر هڪ عنصر کي هڪ مخصوص چوٽي ڏيڻ لاءِ. جڏهن به ڪالمن جا ڪلاس استعمال ڪيا ويندا آهن جيئن ته هڪ قطار جي غير سڌي ٻارن جي طور تي، پيڊنگ کي ختم ڪيو ويو آهي.

.col-3: ويڪر 25%
.col-sm-9: ويڪر 75٪ مٿي sm بريڪ پوائنٽ کان
html
<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

ڪلاس استعمال ڪري سگھجن ٿا افاديت سان گڏ جوابي فلوٽ ٿيل تصويرون ٺاهڻ لاءِ. پڪ ڪريو ته مواد کي لفافي ۾ لفاف ڪريو .clearfixفلوٽ صاف ڪرڻ لاءِ جيڪڏهن متن ننڍو آهي.

Placeholder Responsive floated image

جڳھ رکندڙ متن جو ھڪڙو پيراگراف. اسان ان کي هتي استعمال ڪري رهيا آهيون صاف فڪس ڪلاس جي استعمال کي ڏيکارڻ لاءِ. اسان هتي ڪجھ بي معنيٰ جملا شامل ڪري رهيا آهيون اهو ڏيکارڻ لاءِ ته ڪالم هتي فليٽ ٿيل تصوير سان ڪيئن لهه وچڙ ۾ اچن ٿا.

جئين توهان ڏسي سگهو ٿا پيراگراف شاندار طور تي ڀريل تصوير جي چوڌاري لفافي. ھاڻي تصور ڪريو ته ھي ھتي ڪجھ اصل مواد سان ڪھڙو نظر ايندو، بجاءِ ھن بورنگ جڳھ رکندڙ متن جي جيڪو ھلندو رھي ٿو، پر حقيقت ۾ ڪا خاص معلومات پھچائي ٿو. اهو صرف جاء وٺندو آهي ۽ واقعي پڙهڻ نه گهرجي.

۽ اڃا تائين، توهان هتي آهيو، اڃا تائين هن جڳهه واري متن کي پڙهڻ ۾ صبر ڪري رهيا آهيو، ڪجهه وڌيڪ بصيرت جي اميد، يا مواد جي ڪجهه پوشیدہ ايسٽر ايگ. هڪ مذاق، شايد. بدقسمتي سان، هتي ان مان ڪو به ناهي.

html
<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>