2013-03-24 12 views
5

मैंने इस एप्लिकेशन के लिए ट्विटर बूटस्ट्रैप का उपयोग करना शुरू किया जिस पर मैं काम कर रहा हूं।ट्विटर बूटस्ट्रैप - घोंसले पंक्तियों बनाम एकाधिक पंक्तियां

मैंने दोनों निश्चित ग्रिड सिस्टम और तरल पदार्थ में घोंसले वाली पंक्तियों के बारे में प्रलेखन पढ़ा।

अब, मैं तो निश्चित रूप से मैं इस

<div class="container"> 
    <div class="row"> 
     <div class="span 12">red</div> 
     <div class="row"> 
      <div class="span 3">yellow</div> 
      <div class="span 9">green</div> 
     </div> 
    </div> 
</div> 

की तरह कुछ कर सकता है इस

enter image description here

की तरह कुछ करना चाहता हूँ और मुझे लगता है कि मुझे लगता है मैं क्या चाहते हैं मिलेगा। लेकिन मैं सोच रहा हूँ क्या

<div class="container"> 
    <div class="row"> 
     <div class="span 12">red</div> 
    </div> 
    <div class="row"> 
     <div class="span 3">yellow</div> 
     <div class="span 9">green</div> 
    </div> 
</div> 

कर मैं अपने ब्राउज़र में अब कोई फर्क नहीं दिख रहा है के परिणाम हैं लेकिन मैं सोच रहा हूँ अगर मैं एक container टैग में एकाधिक पंक्ति तत्वों में शामिल हैं कि क्या होगा। क्या मैंने कुछ दिखाए जाने का एकमात्र उचित तरीका पंक्ति दिखाया है? मेरे डिजाइन के उन दो कार्यान्वयन के बीच क्या अंतर है, तो बोलने के लिए?

+1

जैसा कि आप वास्तव में दो पंक्तियों को चाहते हैं, मैं दूसरे उदाहरण के लिए जाऊंगा। यह भी ध्यान रखें कि आपके पास अपने कक्षा नामों में एक जगह है जो वहां नहीं होनी चाहिए। – jtheman

+1

मैं @jtheman – MLewisCodeSolutions

उत्तर

6

दूसरा संस्करण अधिक सही है। लेकिन दोनों काम करते हैं। अंतर यह है कि जब पेज का आकार बदलता है तो यह कैसे प्रतिक्रिया देता है। दूसरे संस्करण हटना और प्रतिक्रिया करेंगे बेहतर

हालांकि आप कंटेनर ऊपर छवि आप उपयोग करना class="container-fluid" और class="row-fluid"

भी फैला और संख्या

class="span 3" 

के बीच रिक्त स्थान को हटाने की जरूरत है मिलान करना चाहते हैं कहना चाहिए

class="span3" 
+0

से सहमत हूं मैं आपके साथ सहमत हूं! :) – jtheman

+0

रिक्त स्थान के बारे में: अच्छा बिंदु, धन्यवाद! 'तरल पदार्थ' के बारे में, वह क्यों है? जो मैं समझता हूं उससे 'तरल पदार्थ' और 'निश्चित' के बीच का अंतर घोंसले के नियम (माता-पिता के लिए 12 बनाम योग) है, क्या इसके लिए कुछ और है? मैं अभी भी एक नौसिखिया हूं और मैं बूटस्ट्रैप की सभी बारीकियों को पूरी तरह से समझ नहीं पा रहा हूं। – Andna

+0

आपके कंटेनर या पंक्ति वर्गों में '-फ्लूइड' जोड़ना अनिवार्य रूप से वस्तुओं को उनके मूल ऑब्जेक्ट चौड़ाई में विस्तारित करेगा। तो यदि आपकी मूल वस्तु 'वर्ग = "वाहक-तरल पदार्थ" के लिए ऑब्जेक्ट है, तो '' ऑब्जेक्ट है, तो' वर्ग = "कंटेनर-तरल पदार्थ" ऑब्जेक्ट '' चौड़ाई तक विस्तारित होगा। – MLewisCodeSolutions

संबंधित मुद्दे