Bootstrap 3'te ızgara sınıflarını (col-sm- # ve col-lg- #) anlama

Bootstrap 3'e başlıyorum ve grid sınıflarının nasıl kullanılması gerektiğini anlamakta güçlük çekiyorum.

İşte şimdiye kadar anladığım şey:

Görünüşe göre sınıflar col-sm-#ve col-lg-#düz eskiden farklı col-#oldukları için, bunlar yalnızca ekranlar belirli bir boyutun (sırasıyla 768px ve 992px) üzerindeyken uygulanacaklardır. -Sm- veya -lg- 'yi atlarsanız, div'ler hiçbir zaman tek bir sütuna daralmaz.

Ancak, bir satırın içinde her ikisi de olan iki div oluşturduğumda, pencere 768px ve 992px genişliğinde olduğunda sadece yan yana col-sm-6görünüyorlar . Ben tüm yol aşağı pencereyi küçültmek ve daha sonra yavaşça genişletmek Başka bir deyişle, düzen ardından tekrar tek sütuna, daha sonra, iki sütun tek sütundur tekrar .

1. Amaçlanan davranış bu mu?
2. 768 pikselin üzerinde bir şey için iki sütun istersem, her iki sınıfı da uygulamalı mıyım? ( <div class="col-sm-6 col-lg-6">)
3. Should col-6 da dahil edilebilir?<div class="col-6 col-sm-6 col-lg-6">

[AŞAĞIDAKİ GÜNCELLEME]

Dokümanlara bir kez daha baktım ve özellikle bundan bahseden bir bölümü gözden kaçırmışım gibi görünüyor.

Sorularımın cevapları:

1. Evet, belirli bir genişliğin üzerindeki her şey yerine yalnızca belirli aralıklara uygulanmaları amaçlanmıştır.

2. Evet, sınıfların birleştirilmesi amaçlanmıştır.

3. Col- # sınıfları temelde col-xsm- # veya 0px'in üzerindeki genişliklere (tüm genişlikler) eşdeğer olduğundan, bunun belirli durumlarda uygun olduğu, ancak diğerleri için uygun olmadığı görülmektedir.

Belgeleri çok hızlı okumak dışında kafam karıştı çünkü Bootstrap 3'e "Bootstrap 2 zihniyeti" ile geldim. Özellikle, v2 ve v3'te (isteğe bağlı) duyarlı stilleri (bootstrap-responsive.css) kullanıyordum (daha iyi IMO için) oldukça farklı.

Kararlı sürüm için GÜNCELLEME:

Bu soru ilk olarak RC1 çıktığında yazılmıştır. RC2'de bazı büyük değişiklikler yaptılar, bu yüzden bunu şimdi okuyan herkes için yukarıda bahsedilen her şey hala geçerli değil.

Şu anda bunu yazdığımdan beri, col-*-#sınıflar yukarı doğru uygulanıyor gibi görünüyor. Örneğin, bir öğenin telefonlar için 12 sütun (tam genişlik), ancak tabletler ve üstü için iki adet 6 sütun (yarım sayfa) olmasını istiyorsanız, şöyle bir şey yaparsınız:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(Bu soru yazıldıktan sonra ek bir xs kırılma noktası da eklediler.)

Buraya , Bootstrap 3'te yeni grid sınıflarının nasıl kullanılacağını açıklayan çok iyi bir öğreticiniz var.

Ayrıca karışımları vb. Kapsar.

"768 pikselden fazla bir şey için iki sütun istiyorsam, her iki sınıfı da uygulamalı mıyım?"

Bu, şu kadar basit olmalıdır:

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>    
</div>

Eklemeye gerek yok col-lg-6.

Demo: http://www.bootply.com/73119

Anlamanın en iyi yolu, yukarıdan aşağıya düşünmektir (Büyük Masaüstü Bilgisayarlardan Cep Telefonlarına)

Öncelikle, B3 mobil olduğundan, xs kullanırsanız, sütunlar Büyük masaüstlerinden xs'ye kadar aynı olacaktır (xs veya sm kullanmanızı tavsiye ederim, çünkü bu, her ekran boyutunda istediğiniz her şeyi istediğiniz şekilde tutacaktır)

İkincisi, farklı cihazlarda veya çözünürlüklerde sütunlara farklı genişlik vermek istiyorsanız, birden fazla sınıf ekleyebilirsiniz;

Yukarıdakiler genişliği ekran çözünürlüğüne göre değiştirecektir, UNUTMAYIN her sınıftaki toplam sütunları tutuyorum = 12

Umarım cevabım yardımcı olur!

SDP 'cevabı yukarıdaki değişiklik için, beyan gerekmediğini col-xs-12de <div class="col-xs-12 col-sm-6">. Bootstrap 3 mobil önceliklidir, bu nedenle her div sütununun varsayılan olarak% 100 genişlikte bir div olduğu varsayılır - bu, "xs" boyutunda% 100 genişlikte olduğu anlamına gelir, ayarladığınız şey ne olursa olsun her zaman bu davranışı varsayılan olacaktır sm, md, lg. Eğer isterseniz xssütunları değil% 100 olması, o zaman normalde yapmak col-xs-(1-11).

Çoğumuzun BS4 kullandığını düşündüğüm için bu geç olabilir. Bu makale, sorduğunuz tüm soruları ayrıntılı ve basit bir şekilde açıklamıştır, ayrıca ne zaman ne yapmanız gerektiğini de içerir. BS4 kullanmak için ayrıntılı kılavuz veyabootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7