Soru Düzensiz bootstrap sütun sarma


Haml, haml-ray, sass ve bootstrap-sass son sürümleri ile 4.1.4 çalışan raylar. Bir kullanıcı ekranı için HAML'im şöyle:

.tutors-listing
    .row
      - @users.each do |tutor|
        .col-xs-12.col-md-3
          .row.tutor
            .col-xs-offset-1.col-xs-4.col-md-12
              = image_tag tutor.photo, :class => 'img-responsive img-circle tutor-photo'
              %h4.tutor-name
                = tutor.first_name

             %p
                teaches
             %strong.tutor-skills
               = tutor.teachables

Ancak, bu işaretleme aşağıdaki aksaklıklarla sonuçlanır: Irregular column wrapping More irregular column wrapping

Umarım, burada neyin yanlış olduğunu görebilirsin. Orta kesme noktasında, eşit olarak 4 sütun olmalıdır.


44
2017-09-01 04:09


Menşei


Cevabımı buraya bakın: stackoverflow.com/questions/24571062/.... İşte bir Bootply demosu: bootply.com/jme11/U91pZvp81q#. Ve, "geleneksel" duyarlılık hakkında daha fazla ayrıntı burada sıfırlar: stackoverflow.com/questions/24494409/... - jme11
getbootstrap.com/css/#grid-responsive-resets - nunoarruda


Cevaplar:


Bu, 2 satırlık metin veya daha fazla becerilerden kaynaklanır. Kullanırken iyi bilinen bir hata float özelliği. Anlamanız gereken küçük bir resim:

enter image description here

[Bootply] Sorun

Seçenek # 1: Yüksekliği zorla

İlk seçeneğiniz, öğelerin aynı yüksekliğe sahip olmasını zorlamaktır:

.tutor {
    height: 500px;
}
  • [Pro] Basit ve her yerde çalışın
  • [Con] Bir sihirli numara kullan
  • [Con] Becerideki satır sayısını sınırlandırın
  • [Con] Becerik versiyonda işe yaramaz whitespaces

[Bootply] Kuvvet yüksekliği

Seçenek 2: Bir clearfix kullanın

İkinci seçeneğiniz bir clearfix kullanmak ve 5. unsuru yeni bir satırda olmak için zorlamaktır (9'uncu, 13'üncü için aynıdır):

.tutors-listing > .row > .col-md-3:nth-child(4n+1) {
    clear: both;
}
  • [Pro] Becerideki satır sayısını sınırlamıyor
  • [Pro] işe yaramaz whitespaces
  • [Pro] Sihirli numara yok
  • [Con] Her beden için bir CSS kuralı (xs/sm/md/lg)
  • [Con] Kural, kılavuzunuza bağlıdır (.col-xx-3)

[Bootply] Clearfix


107
2017-09-05 09:05



Mükemmel cevap. Öğretmenin becerilerini başka bir div'a koyabileceğinizi ve bunun için bir min yüksekliği belirleyebileceğinizi, böylece fazla içeriği olmasa bile yükseklikleri koruyabileceğinizi ekleyebilirim. - Dimas Pante
Teşekkürler. Sorun asgari yükseklik değil, en yüksek olanıdır. Her neyse min-heightBir elemanın takipçilerinden daha yüksek olması durumunda, sizi ızgaraya ayıracaktır. - zessx
Doğru. Yükseklikler her zaman kodumuzla uğraşıyor. - Dimas Pante
@zessx Bugün benzer bir soruya yeni cevap verdim ve çok yaygın bir senaryo olduğu için ilkine çok az benzer bir yaklaşım gösterdim. Şahsen, daha iyi kontrol için maksimum ve minimum yükseklik kombinasyonunu kullanma eğilimindeyim (bu sayede daha fazla oda / boşluk bırakabilirim, ancak medya sorgularında daha az kodlama yapabilirim). Bununla birlikte, OP için başka bir yaklaşım eklemek istiyorum: becerileri (karakter yerine) karakterle sınırlamak için her zaman aynı uzunlukta olurlar veya az sayıda çizgi zorlarlar. Her iki durumda da, bu cevap için +1 ve açıklama - Devin
@ vipin8169 Sorunu göremiyorum. # 2 çözümü, satırlarınızın yüksekliğini umursamıyor. Dinamik olarak değiştirilse bile, sonraki satırın tamamını çalışır ve iter. - zessx


Benim durumumda, büyük ekranlarda satır başına 3, orta ekranlarda 2 ve küçük ekranlarda 1 olmak istedim.

Efekt tetiklendiğinde doğrulamak için arka plan renklerini de rahatsız edebilirsiniz.

http://www.bootply.com/QOor73wFAY#

/* fixes for columns wrapping in odd ways due to variable height */
/* when showing 2 items per row, clear #1, 3, 5 */
@media (min-width: $screen-sm-min){
    .cell-box:nth-child(2n+1){
        clear: both;
        /* background-color: rgba(0, 0, 255, .5); /* blue */
    }
}
/* when showing 3 items per row, clear #1, 4, 7 */
@media (min-width: $screen-md-min){
    .cell-box:nth-child(2n+1){
        clear: none;
    }
    .cell-box:nth-child(3n+1){
        clear: both;
        /* background-color: rgba(0, 255, 0, .5); /* green */
    }
}

13
2018-02-17 21:33



Tam olarak aradığım şey buydu. Teşekkürler! Ayrıntılarımı ve tek satırdaki "satır başına öğe" yi (döngüde) ayırmak için bunu değiştirdim. - Shiva


Bazen bu konuya da girerim. İhtiyacınız olmayan herhangi bir dolgu veya marjın üzerine yazılmasını tavsiye ederim. İlk önce marjı 0 olarak değiştirmeyi deneyin. Sonra bazı dolguları çıkarın. Bazı vakalarımda bu yardımcı oldu.


1
2017-09-10 23:34





Görünüşe göre, tüm sütunları tek bir satırda görüntülüyorsunuz. Değiştirmelisin böylece her 4 kolonda yeni bir sıra başlar. (sade eski erb'de)

  <% @users.each_slice(4).to_a.each do |chunk| %>
     <div class="row">
       <% chunk.each do |tutors| %>
         <div class="col-sm-3">
           ...
         </div>
       <% end %>
    </div>
  <% end %>

İlk döngüde to_a'ya ihtiyacınız olmayabilir


1
2017-09-11 04:19



Sorun, farklı ekran boyutlarında kolayca 3 ila 4 sütun değiştirememeleridir. - Stephan Muller
Öneri için teşekkürler - Benoît
İyi nokta, bunu düşünmemiştim. - ob264