सवाल अनियमित बूटस्ट्रैप कॉलम रैपिंग


हैमल, हैमल-रेल, एसएएस, और बूटस्ट्रैप-एसएएस के नवीनतम रिलीज के साथ रेल 4.1.4 रनिंग। उपयोगकर्ता के प्रदर्शन के लिए, मेरा एचएएमएल इस प्रकार है:

.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

हालांकि, इस मार्कअप के परिणामस्वरूप निम्नलिखित गड़बड़ी होती है: Irregular column wrapping More irregular column wrapping

मुझे उम्मीद है कि somenone यहां क्या गलत है यह परिभाषित कर सकते हैं। मध्यम ब्रेकपॉइंट पर, समान रूप से 4 कॉलम होना चाहिए।


44
2017-09-01 04:09


मूल


मेरा उत्तर यहां देखें: stackoverflow.com/questions/24571062/...। यहां एक बूटप्ले डेमो है: bootply.com/jme11/U91pZvp81q#। और, यहां "पारंपरिक" उत्तरदायी रीसेट के बारे में अधिक जानकारी दी गई है: stackoverflow.com/questions/24494409/... - jme11
getbootstrap.com/css/#grid-responsive-resets - nunoarruda


जवाब:


यह पाठ की 2 पंक्तियों या अधिक के साथ कौशल के कारण होता है। उपयोग करते समय यह एक प्रसिद्ध बग है float संपत्ति। समझने के लिए यहां एक छोटी सी तस्वीर है:

enter image description here

[बूटप्ली] मुद्दा

विकल्प # 1: ऊंचाई को मजबूर करें

आपका पहला विकल्प तत्वों को समान ऊंचाई रखने के लिए मजबूर करना है:

.tutor {
    height: 500px;
}
  • [प्रो] सरल और हर जगह काम करते हैं
  • [कॉन] एक जादू संख्या का प्रयोग करें
  • [कॉन] कौशल में लाइनों की संख्या सीमित करें
  • [कॉन] मॉडेल संस्करण पर बेकार सफेद जगहें

[बूटप्लेस] बल की मजबूती

विकल्प # 2: एक स्पष्टफिक्स का प्रयोग करें

आपका दूसरा विकल्प एक स्पष्टफिक्स का उपयोग करना है, और 5 वें तत्व को नई लाइन पर रखना है (9वीं, 13 वीं के लिए ...):

.tutors-listing > .row > .col-md-3:nth-child(4n+1) {
    clear: both;
}
  • [प्रो] कौशल में लाइनों की संख्या सीमित नहीं है
  • [प्रो] कोई बेकार सफेद जगहें
  • [प्रो] कोई जादू संख्या नहीं
  • [कॉन] प्रति आकार एक सीएसएस नियम (xs/sm/md/lg)
  • [कॉन] नियम आपके ग्रिड पर निर्भर करता है (.col-xx-3)

[बूटप्ली] Clearfix


107
2017-09-05 09:05



बहुत बढ़िया जवाब। मैं जोड़ता हूं कि आप ट्यूटर के कौशल को किसी अन्य div में डाल सकते हैं और इसके लिए एक न्यूनतम ऊंचाई परिभाषित कर सकते हैं, इसलिए यदि इसमें अधिक सामग्री नहीं है, तो ऊंचाई बनाए रखेगी। - Dimas Pante
धन्यवाद। समस्या न्यूनतम ऊंचाई नहीं है, लेकिन अधिकतम एक है। जो कुछ min-height, यदि एक तत्व अपने अनुयायियों से अधिक है तो यह आपको ग्रिड तोड़ देगा। - zessx
सच। ऊंचाई हमेशा हमारे कोड के साथ गड़बड़ाना। - Dimas Pante
@zessx मैंने अभी एक समान प्रश्न का उत्तर दिया और आपके पहले व्यक्ति के लिए कम या ज्यादा समान दृष्टिकोण दिया क्योंकि यह एक बहुत ही आम परिदृश्य है। निजी तौर पर, मैं बेहतर नियंत्रण के लिए अधिकतम और न्यूनतम ऊंचाई के कॉम्बो का उपयोग करता हूं (इस तरह से मैं अधिक कमरे / रिक्ति दे सकता हूं लेकिन मीडिया प्रश्नों पर कम कोडिंग का उपयोग करता हूं)। हालांकि, मैं ओपी के लिए एक और दृष्टिकोण जोड़ना चाहता हूं: केवल चरित्र (शब्दों के बजाए) द्वारा कौशल को सीमित करने के लिए, इसलिए वे हमेशा एक ही लंबाई होते हैं, या लाइनों की एक छोटी संख्या को मजबूर करते हैं। किसी भी तरह से, इस उत्तर और स्पष्टीकरण के लिए +1 - Devin
@ vipin8169 मुझे समस्या नहीं दिखाई दे रही है। # 2 समाधान आपकी पंक्तियों की ऊंचाई परवाह नहीं करता है। भले ही यह गतिशील रूप से बदल गया हो, यह काम करेगा और पूरी अगली पंक्ति को नीचे दबाएगा। - zessx


मेरे मामले में मैं बड़ी स्क्रीन पर प्रति पंक्ति 3 आइटम, मध्यम स्क्रीन पर 2 और छोटी स्क्रीन पर 1 दिखाना चाहता था।

प्रभाव ट्रिगर होने पर सत्यापित करने के लिए आप पृष्ठभूमि रंगों को भी असम्बद्ध कर सकते हैं।

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



यह ठीक वही है जिसकी मुझे तलाश थी। धन्यवाद! मैंने इसे एक ही पंक्ति (लूप में) में अपने ब्रेकपॉइंट्स और "प्रति पंक्ति आइटम" को सुइट करने के लिए संशोधित किया। - Shiva


कभी-कभी, मैं इस मुद्दे में भी भाग लेता हूं। मैं आपको किसी भी पैडिंग या मार्जिन को ओवरराइट करने की कोशिश करने की अनुशंसा करता हूं जिसकी आपको आवश्यकता नहीं है। मार्जिन को पहले 0 में बदलने का प्रयास करें। फिर कुछ पैडिंग हटा दें। इससे मेरे कुछ मामलों में मदद मिली है।


1
2017-09-10 23:34





इसके दिखने से आप एक ही पंक्ति में सभी कॉलम प्रतिपादित कर रहे हैं। आपको इसे बदलना होगा ताकि यह प्रत्येक 4 कॉलम यानी एक नई पंक्ति शुरू करे। (सादे पुराने युग में)

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

आपको पहले लूप पर to_a की आवश्यकता नहीं हो सकती है


1
2017-09-11 04:19



समस्या यह है कि वे विभिन्न स्क्रीन आकारों पर आसानी से 3 से 4 कॉलम पर स्विच नहीं कर सकते हैं। - Stephan Muller
सिफारिश के लिए धन्यवाद - Benoît
अच्छा मुद्दा, मैंने इसके बारे में सोचा नहीं था। - ob264