क्या आप बूटस्ट्रैप कंटेनर घोंसला कर सकते हैं?

Question

डॉक्स से http://getbootstrap.com/css/ पर

आप दो कंटेनरों में से एक अपनी परियोजनाओं में उपयोग करने के लिए चुन सकते हैं। नोट कि, पैडिंग और अधिक के कारण, न तो कंटेनर घोंसला है।

और

अपने सबसे बाहरी .container बदलते .container-तरल पदार्थ के लिए द्वारा एक पूर्ण-चौड़ाई लेआउट में किसी भी निश्चित-चौड़ाई ग्रिड लेआउट कर दें।

दूसरा वाक्य यह इंगित करता है कि आप नेस्टेड कंटेनर रख सकते हैं। पहला वाक्य यह इंगित करता है कि एक कंटेनर एक पृष्ठ होना चाहिए।

यह कौन सा है?

(एक मामला एक कंटेनर के अंदर एक कंटेनर-तरल पदार्थ घोंसला करना चाहता है - या बस निश्चित चौड़ाई वाले किसी अन्य तत्व के अंदर)।

Answer 1

आप कंटेनर-द्रव

h4 { 
 
    margin-top: 25px; 
 
} 
 
.container { 
 
    border: solid 5px red; 
 
} 
 
.row { 
 
    margin-bottom: 20px; 
 
} 
 
.row .row { 
 
    margin-bottom: 0; 
 
} 
 
.nested-container { 
 
    border: solid 3px green; 
 
} 
 
.container-fluid { 
 
    border: solid 3px blue; 
 
} 
 
[class*="col-"] { 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    background-color: #eee; 
 
    background-color: rgba(86, 61, 124, .15); 
 
    border: 1px solid #ddd; 
 
    border: 1px solid rgba(86, 61, 124, .2); 
 
} 
 
hr { 
 
    margin-top: 40px; 
 
    margin-bottom: 40px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
    <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
    <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
     </div> 
 
     </div> 
 
     <div class="container nested-container"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
</div>