पैडिंग

Question

के साथ नेस्टेड बूटस्ट्रैप लेआउट मैं अनुभागों में से किसी एक में पैडिंग के साथ नेस्टेड बूटस्ट्रैप लेआउट कैसे बना सकता हूं?

एक उदाहरण नीचे दिया गया है। यदि मैं .span12 के साथ बूटस्ट्रैप div में #main-container लपेटता हूं, तो यह काम करता है। लेकिन इसका मतलब है कि #main-content अब .span12 चौड़ाई से 40px पतला है, जिसका अर्थ है कि मैं इसके अंदर बूस्ट्रैप ग्रिड का उपयोग नहीं कर सकता। (उदाहरण के लिए, यह #left-column एक .span9 और #right-column एक .span3 बनाने के लिए महान होगा, लेकिन मैं नहीं कर सकता।)

वहाँ इस लेआउट बनाने के लिए एक बेहतर तरीका है?

Answer 1

मुझे लगता है कि यह वास्तव में आप क्या गद्दी के साथ हासिल करना चाहते हैं पर निर्भर करता है।

उदाहरण के लिए, यदि आप पैडिंग द्वारा प्रदान की गई जगह में पृष्ठभूमि चाहते हैं, तो आपको निश्चित रूप से वास्तविक पैडिंग की आवश्यकता होती है। लेकिन यदि दूसरी तरफ आप बस कुछ रिक्ति चाहते हैं, तो आप मूल ग्रिड से चिपकने में सक्षम होना चाहिए (.span बच्चों को उनके कंटेनर के बजाय मार्जिन देना)।

आपके लेआउट के आधार पर, द्रव समाधान स्पष्ट रूप से अधिक अनुकूलनीय और कार्यान्वित करने में आसान है।

गद्देदार तत्व के अंदर तरल पदार्थ ग्रिड का लाभ ले जाता है: Demo (jsfiddle)

<div class="container"> 
    <div class="row"> 
     <div class="span12" id="header">#header</div> 
    </div> 
    <div id="main-container"> 
     <div class="row-fluid"> 
      <div class="span12" id="main-content">#main-content</div> 
     </div> 
     <div class="row-fluid"> 
      <div class="span9" id="left-column">#left-column</div> 
      <div class="span3" id="right-column">#right-column</div> 
     </div> 
    </div> 
</div> 

अद्यतन एक और अधिक स्पष्ट सीमा और पृष्ठभूमि जोड़ा गया: Border demo (jsfiddle)

#main-container { 
    padding: 20px; 
    border: 3px solid red; 
    background: yellow; 
} 
#main-container > .row-fluid { background: white; }