ट्विटर बूटस्ट्रैप - पंक्ति-तरल पदार्थ

Question

के साथ स्थिति समस्या मैं वर्तमान में ट्विटर बूटस्ट्रैप का उपयोग कर एक वेबसाइट बना रहा हूं (जो अद्भुत है!)। मैं लेआउट का उपयोग किया था:

<div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 

कौन सा अच्छा काम करता है, मैं प्रति पंक्ति 2 divs मूल रूप से है, और हम हमारे पाश में एक काउंटर मार्जिन से छुटकारा पाने के शामिल करने के लिए नहीं था। यह एकदम सही था! लेकिन हमने एक निश्चित लेआउट रखने के बारे में अपना मन बदलने का फैसला किया, इसलिए मैंने .row से .row-fluid में स्विच किया। और यह तब होता है जब समस्या आती है।

मैं इस तरह कुछ है पता है:

<div class="row-fluid"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 

और div अच्छी तरह से पहली पंक्ति के लिए .span6 काम के साथ की है, लेकिन फिर मार्जिन छोड़ दिया .span6 पर दूसरी पंक्ति से शुरू दिख रहे हैं, इसलिए लेआउट अच्छी तरह से है ... अच्छा नहीं है।

मैं हैरान हूं कि यह निश्चित लेआउट के लिए अद्भुत काम करता है लेकिन पंक्ति-तरल पदार्थ नहीं। क्या इसके आसपास कोई कार्य है? मैंने इसे अपनी सभी साइट पर इस्तेमाल किया, इसलिए उन सभी के लिए काउंटर जोड़ने के लिए ... बहुत अधिक काम होगा। http://jsfiddle.net/denislexic/uAs6k/3/

किसी भी मदद की सराहना की है, धन्यवाद:

यहाँ जे एस फिडल है।

Answer 1

आप नंबर पता है प्रत्येक पंक्ति के लिए अवधि के, आप इस तरह की अभिव्यक्ति का उपयोग कर सकते हैं:

.row-fluid [class*="span"]:nth-child(3n+1) { 
    margin-left: 0; 
} 

उदाहरण के लिए: यदि आपके पास प्रत्येक पंक्ति के लिए 3 स्पैन हैं, तो उपर्युक्त अभिव्यक्ति प्रत्येक पंक्ति के पहले अवधि से मार्जिन को हटा देगी।

.row-fluid [class*="span"]:nth-child(3n+3) { 
    margin-right: 0; 
} 

Answer 2

.row-fluid [class*="span"]:first-child { 
margin-left: 0; 
} 

यह केवल पहले बच्चे के लिए मार्जिन को हटा तो आप या बदलने span6margin-left:0;

Answer 3

आपका 2 उदाहरण के लिए किसी अन्य वर्ग जोड़ने की आवश्यकता होगी वास्तव में एक पूर्ण-चौड़ाई 'पंक्ति' के भीतर 4 <div class="span6"></div> है .. 12 कॉलम ग्रिड सेटअप के आधार पर '24' तक जोड़ना, या 'पंक्ति' या 'पंक्ति-तरल पदार्थ' के लिए चौड़ाई वाली चौड़ाई। जब आप पैरेंट पंक्ति की चौड़ाई के भीतर फिट बैठते हैं तो आप मूल रूप से ड्रॉप फ्लोट बना रहे हैं। (यह भी कारण है कि ऐसा लगता है कि 'margin-left: 0'। अपने 3 'span6' है, जो लगता है कि यह पहली बार एक 2 पंक्ति के 'span6' है के लिए लागू नहीं किया जा रहा है)

एक डिफ़ॉल्ट/निश्चित 'पंक्ति' में, नेस्टेड कॉलम के 'स्पैन *' + ऑफसेट * की को अपने माता-पिता के कॉलम 'अवधि *' से कम या बराबर होने की आवश्यकता होगी, या यदि यह पहली-स्तर की पंक्ति है , फिर 12, क्योंकि फ्लोटेड 'अवधि *' चौड़ाई पिक्सेल में हैं।

एक लचीला/द्रव 'पंक्ति-द्रव' में, स्तंभ चौड़ाई प्रतिशत के आधार पर स्थापित कर रहे हैं, इसलिए प्रत्येक पंक्ति और एकत्रित पंक्ति स्तंभ नेस्ट कर सकते हैं 'काल * के और' ऑफसेट * की है कि को जोड़ने 12, हर बार। http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

यह आपकी समस्या को 'पंक्ति-तरल पदार्थ' सेटअप के साथ हल करना चाहिए। http://jsfiddle.net/csabatino/uAs6k/9/

<h1>NOW this is working.</h1> 
<div class="row-fluid"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 
<div class="row-fluid"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 


<h1>Default fixed 'row' is working, too.</h1> 
<div class="row"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 
<div class="row"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 

Answer 4

ऐप्लिकेशन तत्वों गिनती नहीं कर सकते हैं और पंक्तियों में विभाजित, margin-left को दूर करने और padding-right जोड़ने मेरे लिए ठीक काम किया:

.gal [class*="span"] {margin-left:0; padding-right:20px;} 

http://jsfiddle.net/uAs6k/116/

Answer 5

मैं सिर्फ बजाय jQuery के साथ ऐसा किया:: और नीचे एक-एक पंक्ति पर पिछले तत्व के लिए मार्जिन-सही को हटा

$(document).ready(function(){ 
    function doFluidFirstSpan() { 
     var top = $('.thumbnails > li:first-child').position().top; 
     $('.thumbnails > li').each(function(){ 
      if($(this).position().top > top) { 
       $(this).addClass("alpha"); 
       top = $(this).position().top; 
      } 
     }); 
    } 

    doFluidFirstSpan(); 
} 

और सीएसएस:

.alpha { margin-left: 0 !important; } 

Answer 6

मैंने शुरुआत में span12 के साथ एक खाली div डालकर हल किया, कोड में बदसूरत लेकिन गुई