Ustunlar

Flexbox grid tizimimiz tufayli tekislash, tartiblash va o'zgartirish uchun bir nechta variant bilan ustunlarni qanday o'zgartirishni bilib oling. Bundan tashqari, panjara bo'lmagan elementlarning kengligini boshqarish uchun ustun sinflaridan qanday foydalanishni ko'ring.

Ushbu sahifada

Oldindan qisqa ma'lumot berish! To'r ustunlarini qanday o'zgartirish va sozlashni o'rganishdan oldin birinchi navbatda Grid sahifasini o'qib chiqing .

Ular qanday ishlaydi

Ustunlar tarmoqning flexbox arxitekturasiga asoslanadi. Flexbox bizda alohida ustunlarni o'zgartirish va satr darajasida ustunlar guruhlarini o'zgartirish imkoniyatlari mavjudligini anglatadi . Ustunlar qanday o'sishi, qisqarishi yoki boshqa tarzda o'zgarishini siz tanlaysiz.
To'r sxemalarini yaratishda barcha tarkib ustunlarga kiradi. Bootstrap tarmog'ining ierarxiyasi konteynerdan qatorga ustunga, kontentingizga o'tadi. Kamdan-kam hollarda siz tarkib va ustunni birlashtira olasiz, ammo kutilmagan oqibatlarga olib kelishi mumkinligini yodda tuting.
Bootstrap tezkor, sezgir tartiblarni yaratish uchun oldindan belgilangan sinflarni o'z ichiga oladi. Oltita to'xtash nuqtasi va har bir to'r sathida o'nlab ustunlar bilan bizda siz o'zingiz xohlagan tartiblarni yaratishingiz uchun allaqachon qurilgan o'nlab sinflar mavjud. Agar xohlasangiz, buni Sass orqali o'chirib qo'yish mumkin.

Hizalama

Ustunlarni vertikal va gorizontal tekislash uchun flexbox alignment yordamchi dasturlaridan foydalaning.

Vertikal tekislash

Uch ustundan biri

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>

Uch ustundan biri

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>

Gorizontal tekislash

Ikki ustundan biri

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>

Ustunlarni o'rash

Agar bitta qatorga 12 dan ortiq ustunlar joylashtirilsa, qo'shimcha ustunlarning har bir guruhi bitta birlik sifatida yangi qatorga o'raladi.

.col-9

.col-4
9 + 4 = 13 > 12 bo'lganligi sababli, bu 4-ustun kenglikdagi div yangi qatorga bitta qo'shni birlik sifatida o'raladi.

.col-6
Keyingi ustunlar yangi satr bo'ylab davom etadi.

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>

Ustun uzilishlari

Flexbox-da ustunlarni yangi qatorga ajratish kichik buzishni talab qiladi: ustunlaringizni yangi qatorga o'rashni width: 100%xohlagan joyingiz bilan element qo'shing. Odatda bu bir nechta .rows bilan amalga oshiriladi, ammo har bir amalga oshirish usuli buni hisobga olmaydi.

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

Bu tanaffusni bizning javob beruvchi displey yordam dasturlarimiz yordamida muayyan to'xtash nuqtalarida ham qo'llashingiz mumkin .

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

Qayta tartiblash

Sinflarga buyurtma bering

Kontentingizning vizual tartibini.order- nazorat qilish uchun sinflardan foydalaning . Ushbu sinflar sezgir, shuning uchun siz to'xtash nuqtasini belgilashingiz mumkin (masalan, ). Barcha oltita panjara sathlari bo'ylab qo'llab -quvvatlashni o'z ichiga oladi .order.order-1.order-md-215

DOMda birinchi bo'lib, buyurtma qo'llanilmaydi

DOMda ikkinchi, kattaroq buyurtma bilan

DOM-da uchinchi, 1 buyurtma bilan

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>

Bundan tashqari , mos ravishda va qo'llash orqali elementni o'zgartiradigan sezgir .order-firstva sinflar mavjud. Bu sinflarni kerak bo'lganda raqamlangan sinflar bilan aralashtirish ham mumkin ..order-lastorderorder: -1order: 6.order-*

DOMda birinchi bo'lib, oxirgi buyurtma qilingan

DOMda ikkinchi, tartibsiz

DOMda uchinchi, birinchi bo'lib buyurtma qilingan

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>

O'chirish ustunlari

Siz panjara ustunlarini ikki xil usulda o'zgartirishingiz mumkin: javob .offset-beruvchi grid sinflarimiz va margin yordamchi dasturlarimiz . To'r sinflari ustunlarga mos keladigan darajada o'lchanadi, chetlari esa ofset kengligi o'zgaruvchan bo'lgan tezkor tartiblar uchun foydaliroqdir.

Ofset sinflari

.offset-md-*Sinflar yordamida ustunlarni o'ngga o'tkazing. Ushbu sinflar ustunning chap chetini *ustunlar bo'yicha oshiradi. Masalan, to'rtta ustun ustida .offset-md-4harakatlanadi ..col-md-4

.col-md-4

.col-md-4 .offset-md-4

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

Ta'sir qiluvchi to'xtash nuqtalarida ustunlarni tozalashdan tashqari, ofsetlarni tiklashingiz kerak bo'lishi mumkin. Buni grid misolida amalda ko'ring .

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

Margin yordamchi dasturlari

V4-da flexbox-ga o'tish bilan siz .me-autobirodar ustunlarini bir-biridan uzoqlashtirish kabi margin yordamchi dasturlardan foydalanishingiz mumkin.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

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>

Mustaqil ustun sinflari

Sinflar elementga ma'lum bir kenglik berish uchun .col-*a tashqarisida ham ishlatilishi mumkin . .rowUstun sinflari qatorning to'g'ridan-to'g'ri bo'lmagan bolalari sifatida ishlatilsa, to'ldirishlar o'tkazib yuboriladi.

.col-3: kengligi 25%

.col-sm-9: kengligi sm uzilish nuqtasidan 75% yuqori

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>

Sinflar sezgir suzuvchi tasvirlarni yaratish uchun yordamchi dasturlar bilan birgalikda ishlatilishi mumkin. .clearfixMatn qisqaroq bo'lsa, floatni tozalash uchun tarkibni o'ramga o'rashga ishonch hosil qiling .

To'ldiruvchi matnning paragrafi. Biz bu erda clearfix sinfidan foydalanishni ko'rsatish uchun foydalanmoqdamiz. Ustunlarning suzuvchi tasvir bilan oʻzaro taʼsirini koʻrsatish uchun biz bu yerga bir nechta maʼnosiz iboralarni qoʻshmoqdamiz.

Ko'rib turganingizdek, paragraflar suzuvchi tasvir atrofida chiroyli tarzda o'ralgan. Endi tasavvur qiling-a, bu yerdagi zerikarli toʻldiruvchi matn emas, balki bu yerda qandaydir haqiqiy tarkib bilan qanday koʻrinishini tasavvur qilib koʻring. Bu shunchaki joy egallaydi va haqiqatan ham o'qilmasligi kerak.

Va shunga qaramay, siz hali ham ushbu to'ldiruvchi matnni o'qishda davom etyapsiz, yana bir qancha tushunchalar yoki biron bir yashirin Pasxa tuxumiga umid qilyapsiz. Hazil, ehtimol. Afsuski, bu erda bularning hech biri yo'q.

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>