बूटस्ट्रैप 3 - 2 कॉलम नेस्टेड पंक्तियां

Question

मैं बूटस्ट्रैप 3 में जितना संभव हो उतना छोटा मार्कअप और सीएसएस का उपयोग करके निम्न प्राप्त करने का प्रयास कर रहा हूं। आदर्श रूप में मैं हैक का उपयोग किए बिना शुद्ध बूटस्ट्रैप मार्कअप का उपयोग करके इसे प्राप्त करना चाहता हूं। मैंने प्रलेखन को देखा है लेकिन एक मानकीकृत तरीका नहीं देख सकता ....

जैसा कि आप नीचे देख सकते हैं, मैं केंद्र में एक अंतर के साथ दो पंक्तियां प्राप्त करने की कोशिश कर रहा हूं।

मेरे मार्कअप के रूप में

<section class="row"> 

    <article class="col-sm-12 col-md-6"> 
    <!--ROW LEFT--> 
    <div class="row"> 
     <div class="col-sm-4">col</div> 
     <div class="col-sm-4">col</div> 
     <div class="col-sm-4">col</div> 
    </div> 
    </article> 

    <article class="col-sm-12 col-md-6"> 
    <!--ROW RIGHT--> 
    <div class="row"> 
     <div class="col-sm-4">col</div> 
     <div class="col-sm-4">col</div> 
     <div class="col-sm-4">col</div> 
    </div> 
    </article> 
</section> 

केवल समान उदाहरण बूटस्ट्रैप डॉक्स में है नीचे है, लेकिन आप केंद्र में एक अंतराल नहीं मिलता है इस प्रकार है।

बूटस्ट्रैप मार्कअप

<div class="row"> 
    <div class="col-sm-12"> 
    <div class="row"> 
     <div class="col-sm-6"> 
     content 
     </div> 
     <div class="col-sm-6"> 
     content 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

कितना बड़ा तुम अंतराल चाहते हैं?

का उपयोग करते हुए बी एस कॉलम आप कुछ इस तरह कर सकता है ..

<div class="row"> 
    <div class="col-sm-12"> 
    <div class="row"> 
     <div class="col-sm-5"> 
     content 
     </div> 
     <div class="col-sm-1"></div> <div class="col-sm-1"></div> 
     <div class="col-sm-5"> 
     content 
     </div> 
    </div> 
    </div> 
</div> 

डेमो: http://bootply.com/87117

Answer 2

(या) गद्दी के साथ निर्माण करने के लिए प्रयास करें:

<section class="row" style="background-color:red;"> 

    <article class="col-sm-12 col-md-6" style="padding-right:30px;"> 
    <!--ROW LEFT--> 
    <div class="row" style="background-color:blue;"> 
     <div class="col-sm-4" style="background-color:orange;">col</div> 
     <div class="col-sm-4" style="background-color:silver;">col</div> 
     <div class="col-sm-4" style="background-color:orange;">col</div> 
    </div> 
    </article> 


    <article class="col-sm-12 col-md-6" style="padding-left:30px;"> 
    <!--ROW RIGHT--> 
    <div class="row" style="background-color:blue;"> 
     <div class="col-sm-4" style="background-color:silver;">col</div> 
     <div class="col-sm-4" style="background-color:orange;">col</div> 
     <div class="col-sm-4" style="background-color:silver;">col</div> 
    </div> 
    </article> 

</section> 

लाल रंग में

आपका खाई, देखें: http://bootply.com/87152

Answer 3

स्केली के उत्तर पर विस्तार करने के लिए, आप कर सकते हैं से बूटस्ट्रैप के स्तंभ वर्गों ऑफसेट स्तंभों के बीच अंतराल को बनाने के लिए:

<div class="container"><section class="row"> 

    <article class="col-sm-12 col-md-5"> 
    <!--ROW LEFT--> 
    <div class="row" style="background-color:blue;"> 
     <div class="col-sm-4" style="background-color:orange;">col</div> 
     <div class="col-sm-4" style="background-color:silver;">col</div> 
     <div class="col-sm-4" style="background-color:orange;">col</div> 
    </div> 
    </article> 

    <article class="col-sm-12 col-md-5 col-md-offset-2"> 
    <!--ROW RIGHT--> 
    <div class="row" style="background-color:blue;"> 
     <div class="col-sm-4" style="background-color:silver;">col</div> 
     <div class="col-sm-4" style="background-color:orange;">col</div> 
     <div class="col-sm-4" style="background-color:silver;">col</div> 
    </div> 
    </article> 

</section></div> 

http://bootply.com/103191

इस अतिरिक्त शैलियों को जोड़ने के लिए, लेकिन के रूप में आप जगह बनाने के लिए दो आभासी कॉलम का उपयोग कर रहे एक बड़ा गैप पैदा नहीं करता होने से रोकता है।

यदि आपको दाईं ओर अतिरिक्त स्थान नहीं लगता है, तो आप इसके बजाय ऑफ़सेट 1 बना सकते हैं।