in English

Sütunlar

Esnek kutu ızgara sistemimiz sayesinde bir dizi hizalama, sıralama ve ofset seçeneğiyle sütunları nasıl değiştireceğinizi öğrenin. Ayrıca, ızgara olmayan öğelerin genişliklerini yönetmek için sütun sınıflarının nasıl kullanılacağını görün.

Bu sayfada

Önüne bak! Izgara sütunlarınızı nasıl değiştireceğinize ve özelleştireceğinize dalmadan önce Izgara sayfasını okuduğunuzdan emin olun .

Onlar nasıl çalışır

Sütunlar, ızgaranın esnek kutu mimarisi üzerine inşa edilir. Flexbox, tek tek sütunları değiştirme ve satır düzeyinde sütun gruplarını değiştirme seçeneklerimiz olduğu anlamına gelir . Sütunların nasıl büyüyeceğini, küçüleceğini veya başka bir şekilde değişeceğini siz seçersiniz.
Izgara düzenleri oluştururken tüm içerik sütunlara girer. Bootstrap ızgarasının hiyerarşisi, kapsayıcıdan satıra, sütuna ve içeriğinize gider. Nadir durumlarda, içerik ve sütunu birleştirebilirsiniz, ancak istenmeyen sonuçların olabileceğini unutmayın.
Bootstrap, hızlı, duyarlı düzenler oluşturmak için önceden tanımlanmış sınıflar içerir. Her ızgara katmanında altı kesme noktası ve bir düzine sütunla, istediğiniz düzenleri oluşturmanız için önceden oluşturulmuş düzinelerce sınıfımız var. Bu, dilerseniz Sass aracılığıyla devre dışı bırakılabilir.

hizalama

Sütunları dikey ve yatay olarak hizalamak için esnek kutu hizalama yardımcı programlarını kullanın.

Dikey hizalama

Üç sütundan 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>

Üç sütundan 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>

Yatay hizalama

İki sütundan 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>

Sütun sarma

Tek bir satıra 12'den fazla sütun yerleştirilirse, her bir ekstra sütun grubu bir birim olarak yeni bir satıra sarılır.

.col-9

.col-4
9 + 4 = 13 > 12 olduğundan, bu 4 sütun genişliğindeki div, tek bir bitişik birim olarak yeni bir satıra sarılır.

.col-6
Sonraki sütunlar yeni satır boyunca devam eder.

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>

Sütun sonları

Sütunları flexbox'ta yeni bir satıra bölmek küçük bir kesme gerektirir: width: 100%sütunlarınızı yeni bir satıra sarmak istediğiniz yere bir öğe ekleyin. Normalde bu, birden çok .rows ile gerçekleştirilir, ancak her uygulama yöntemi bunu hesaba katamaz.

.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 arayı, duyarlı görüntüleme yardımcı programlarımızla belirli kesme noktalarında da uygulayabilirsiniz .

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

Yeniden sıralama

Sipariş sınıfları

İçeriğinizin görsel sırasını.order- kontrol etmek için sınıfları kullanın . Bu sınıflar duyarlıdır, böylece kesme noktasına göre ayarlayabilirsiniz (örneğin, ). Altı ızgara katmanının tamamında geçiş desteği içerir .order.order-1.order-md-215

DOM'de ilk, sipariş uygulanmadı

Daha büyük bir siparişle DOM'da ikinci

DOM'da 1 sıra ile üçüncü

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>

Sırasıyla ve uygulayarak bir öğenin değerini değiştiren responsive .order-firstve sınıfları da vardır . Bu sınıflar da gerektiğinde numaralandırılmış sınıflarla karıştırılabilir ..order-lastorderorder: -1order: 6.order-*

DOM'de ilk, son sipariş

DOM'da ikinci, sırasız

DOM'da üçüncü, önce sipariş

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>

Sütunları dengeleme

Izgara sütunlarını iki şekilde dengeleyebilirsiniz: duyarlı .offset-ızgara sınıflarımız ve kenar boşluğu yardımcı programlarımız . Izgara sınıfları, sütunlarla eşleşecek şekilde boyutlandırılırken, kenar boşlukları, ofset genişliğinin değişken olduğu hızlı düzenler için daha kullanışlıdır.

Ofset sınıfları

.offset-md-*Sınıfları kullanarak sütunları sağa taşıyın . Bu sınıflar, bir sütunun sol kenar boşluğunu *sütunlar kadar artırır. Örneğin, dört sütun üzerinde .offset-md-4hareket eder ..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>

Duyarlı kesme noktalarında sütun temizlemeye ek olarak, ofsetleri sıfırlamanız gerekebilir. Bunu ızgara örneğinde çalışırken görün .

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

Marj yardımcı programları

v4'te flexbox'a geçişle, .me-autokardeş sütunları birbirinden uzaklaştırmak gibi kenar boşluğu yardımcı programlarını kullanabilirsiniz.

.col-md-4

.col-md-4 .ms-otomatik

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

.col-auto .me-auto

.col-otomatik

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>

Bağımsız sütun sınıfları

Sınıflar , bir öğeye belirli bir genişlik vermek için .col-*a dışında da kullanılabilir . .rowSütun sınıfları bir satırın doğrudan olmayan alt öğeleri olarak kullanıldığında, dolgular atlanır.

.col-3: %25 genişlik

.col-sm-9: sm kesme noktasının %75 üzerinde genişlik

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>

Sınıflar, yanıt veren kayan görüntüler oluşturmak için yardımcı programlarla birlikte kullanılabilir. .clearfixMetin daha kısaysa kayan noktayı temizlemek için içeriği bir sarmalayıcıya sardığınızdan emin olun .

Yer tutucu metnin bir paragrafı. Burada, clearfix sınıfının kullanımını göstermek için kullanıyoruz. Sütunların kayan görüntü ile burada nasıl etkileşime girdiğini göstermek için buraya epeyce anlamsız tümcecikler ekliyoruz.

Gördüğünüz gibi, paragraflar kayan görüntünün etrafına incelikle sarın. Şimdi bunun, uzayıp giden, ama aslında hiçbir somut bilgi taşımayan bu sıkıcı yer tutucu metin yerine, buradaki bazı gerçek içerikle nasıl görüneceğini hayal edin. Sadece yer kaplar ve gerçekten okunmamalıdır.

Ve yine de, işte buradasınız, hala bu yer tutucu metni okumaya devam ediyorsunuz, biraz daha içgörü ya da bazı gizli paskalya yumurtası içeriklerini umarak. Şaka belki. Ne yazık ki, burada hiçbiri yok.

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>