"Her zaman yatay" ne anlama geliyor?

Question

Ekstra küçük aygıtlar için yeni Önyükleme üç belgeyi explains the grid behaviour "Her zaman yatay" olarak kaydedin. Ne anlama geliyor? Şüphesiz, küçük bir cihaz üzerinde tüm sütunlar birbiri üzerine dikey olarak istiflenecek mi? Burada başarısız olan şey, bir ızgaranın ne olduğunun anlaşılmamasıdır.

Tasarımcı olmayan bir perspektiften geliyorum ve bir dizi üründe yanıt veren bir kılavuza geçmeye çalışıyorum. Her satırdaki sütun sayısı, tek veya çift sayıda ürünün görüntülenip görüntülenmeyeceğine bağlı olarak değişecektir. < - Önyükleme ve benzer şekilde dinamik sayfalarda statik içerikler basit görünüyor. Örneğin, 12'ye kadar yapmak için boş <div class="col-xs*"></div> eklememiz gerekir mi?

Answer 1

"Her zaman yatay" ifadesi, col-xs- * öğesinin yığılmaya kadar değişeceği bir kesme noktası olmamasıdır. Örneğin: Bu örnekte

<div class="col-xs-6"></div> 
<div class="col-xs-6"></div> 

, her zaman bir telefon, tablet veya masaüstünde olsun, eşit büyüklükte iki sütun olacaktır. Buna için: Cihazın görünüm> = 768 kadar

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

Bu örnekte, kolon ve bu noktada eşit büyüklükte iki sütun geçecektir etmektedir, dizilir.

Kendinize sormanız gereken soru "Neden tüm bu varyasyonlar?" Peki, bu seçeneklerin bize verdiği şey, CSS'de ellerimizi kirletmek zorunda kalmadan düzeni çeşitli cihazlarda kişiselleştirme olanağıdır. Örneğin, eğer bir telefonda iki eşit sütun, ancak tabletlerde 75/25 bölünmüş istedi ve yukarı, ben yapardım aşağıdadır:

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

Tablette eşit, telefonlarda yığılmış ve 75 istedi Eğer/25 masaüstüne, sonra bu yapın:

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

açıkça telefon için bir kılavuz belirterek olmadığından, yığılmış dönmek için gidiyor.

Sağlam bir fikir edinmek için basit ızgaraları bir araya getirin ve sonra tarayıcınızı yeniden boyutlandırmaya başlayın. Dokümanların kendilerindekinden çok daha kolay değiştiğini görebilmeniz gerekir.

DÜZENLEME ilginizi çekebilecek bir başka örnek

Düşünce: sonra 75/25 ve masaüstü telefon ve tablette hem de iki eşit sütunlar,. Kod: Bu, "Her zaman yatay" nın harika bir örneğidir. Bir col-sm belirtmediğimizden, col-xs, masaüstü sınır değerine ulaşana kadar zorlanmaya devam eder, bu da> = 992 olarak ayarlanır.