Stulpeliai

Sužinokite, kaip modifikuoti stulpelius naudodami keletą lygiavimo, išdėstymo ir poslinkio parinkčių, naudodami mūsų „flexbox“ tinklelio sistemą. Be to, sužinokite, kaip naudoti stulpelių klases ne tinklelio elementų pločiams valdyti.

Šiame puslapyje

Galvas aukštyn! Prieš pasinerdami į tai, kaip keisti ir tinkinti tinklelio stulpelius, pirmiausia perskaitykite Tinklelio puslapį .

Kaip jie veikia

Stulpeliai remiasi tinklelio „flexbox“ architektūra. Flexbox reiškia, kad turime parinktis keisti atskirus stulpelius ir modifikuoti stulpelių grupes eilutės lygiu . Jūs pasirenkate, kaip stulpeliai auga, mažėja ar kitaip keičiasi.
Kuriant tinklelio išdėstymus, visas turinys patenka į stulpelius. „Bootstrap“ tinklelio hierarchija eina nuo konteinerio iki eilutės iki stulpelio iki jūsų turinio. Retais atvejais galite derinti turinį ir stulpelį, tačiau atminkite, kad gali kilti nenumatytų pasekmių.
„Bootstrap“ apima iš anksto nustatytas klases, skirtas greitam, reaguojančiam išdėstymui kurti. Su šešiais pertraukos taškais ir keliolika stulpelių kiekvienoje tinklelio pakopoje jau sukūrėme daugybę klasių, kad galėtumėte sukurti norimus išdėstymus. Jei norite, tai galite išjungti per Sass.

Lygiavimas

Norėdami vertikaliai ir horizontaliai sulygiuoti stulpelius, naudokite „flexbox“ lygiavimo priemones.

Vertikalus lygiavimas

Viena iš trijų stulpelių

<div class="container">
  <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>

Viena iš trijų stulpelių

<div class="container">
  <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>

Horizontalus lygiavimas

Vienas iš dviejų stulpelių

<div class="container">
  <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>

Stulpelių apvyniojimas

Jei vienoje eilutėje yra daugiau nei 12 stulpelių, kiekviena papildomų stulpelių grupė kaip vienas vienetas bus apvyniotas nauja eilute.

.col-9

.col-4
Kadangi 9 + 4 = 13 > 12, šis 4 stulpelių pločio dalinys perkeliamas į naują eilutę kaip vienas gretimas vienetas.

.col-6
Tolesni stulpeliai tęsiasi pagal naują eilutę.

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

Stulpelių pertraukos

Norint suskaidyti stulpelius į naują eilutę „flexbox“, reikia nedidelio įsilaužimo: pridėkite elementą, width: 100%kur norite apvynioti stulpelius, į naują eilutę. Paprastai tai atliekama naudojant kelis .rows, bet ne kiekvienas įgyvendinimo metodas gali tai paaiškinti.

.col-6 .col-sm-3

<div class="container">
  <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>

Taip pat galite pritaikyti šią pertrauką tam tikrose pertraukos vietose naudodami mūsų interaktyvias rodymo priemones .

.col-6 .col-sm-4

<div class="container">
  <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>

Pertvarkymas

Užsisakykite klases

Naudokite .order-klases, kad galėtumėte valdyti savo turinio vizualinę tvarką . Šios klasės yra atsakingos, todėl galite nustatyti orderpagal pertraukos tašką (pvz., .order-1.order-md-2). Apima perėjimą 1visose 5šešiose tinklelio pakopose.

Pirmiausia DOM, jokia tvarka nepritaikyta

Antra DOM, su didesniu užsakymu

Trečia DOM, eilės tvarka 1

<div class="container">
  <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>

Taip pat yra reaguojančių .order-firstir .order-lastklasių, kurios keičia orderelemento atitinkamai taikydami order: -1ir order: 6. Šios klasės taip pat gali būti maišomos su sunumeruotomis .order-*klasėmis pagal poreikį.

Pirmas DOM, užsakytas paskutinis

Antras DOM, netvarkingas

Trečias DOM, užsakytas pirmas

<div class="container">
  <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>

Stulpelių užskaitymas

Tinklelio stulpelius galite pakeisti dviem būdais: mūsų interaktyviomis .offset-tinklelio klasėmis ir maržos komunalinėmis paslaugomis . Tinklelio klasės yra tokios, kad atitiktų stulpelius, o paraštės yra naudingesnės greitam išdėstymui, kai poslinkio plotis yra kintamas.

Ofsetinės klasės

Perkelkite stulpelius į dešinę naudodami .offset-md-*klases. Šios klasės padidina kairiąją stulpelio paraštę *stulpeliais. Pavyzdžiui, .offset-md-4perkeliama .col-md-4per keturis stulpelius.

.col-md-4

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

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <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>

Be stulpelių išvalymo reaguojančiose pertraukos taškuose, gali reikėti iš naujo nustatyti poslinkius. Žr. tai veikiant tinklelio pavyzdyje .

.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

<div class="container">
  <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>

Maržos komunalinės paslaugos

Perėję prie „flexbox“ 4 versijoje, galite naudoti paraštės priemones, pavyzdžiui .me-auto, priversti stulpelius ir seserį atskirti vienas nuo kito.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

<div class="container">
  <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>

Atskiros kolonų klasės

Klasės .col-*taip pat gali būti naudojamos už a ribų .row, kad elementui būtų suteiktas konkretus plotis. Kai stulpelių klasės naudojamos kaip netiesioginės eilutės antrinės dalys, užpildymai praleidžiami.

.col-3: plotis 25 %

.col-sm-9: plotis 75 % virš sm lūžio taško

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

Klasės gali būti naudojamos kartu su komunalinėmis programomis kuriant reaguojančius plūduriuojančius vaizdus. .clearfixJei tekstas trumpesnis , būtinai suvyniokite turinį į įvyniojimą, kad išvalytumėte plūduriuojančią padėtį.

Rezervuotos vietos teksto pastraipa. Mes naudojame jį čia norėdami parodyti Clearfix klasės naudojimą. Pridedame nemažai bereikšmių frazių, kad parodytume, kaip stulpeliai čia sąveikauja su slankiu vaizdu.

Kaip matote, pastraipos grakščiai apgaubia slankiojantį vaizdą. Dabar įsivaizduokite, kaip tai atrodytų su tikruoju turiniu, o ne tik šiuo nuobodžiu vietos rezervavimo tekstu, kuris tęsiasi ir tęsiasi, bet iš tikrųjų neperteikia jokios apčiuopiamos informacijos. Jis tiesiog užima vietos ir tikrai neturėtų būti skaitomas.

Ir vis dėlto, štai, vis dar atkakliai skaitai šį vietos rezervavimo tekstą, tikėdamasis daugiau įžvalgų ar kažkokio paslėpto velykinio turinio kiaušinio. Pokštas, galbūt. Deja, čia nieko tokio.

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