तीन बराबर स्तम्भहरू

डेस्कटपबाट सुरु हुने र ठूला डेस्कटपहरूमा स्केलिङ गरी तीन बराबर-चौडाइका स्तम्भहरू प्राप्त गर्नुहोस् । मोबाइल उपकरणहरू, ट्याब्लेटहरू र तल, स्तम्भहरू स्वचालित रूपमा स्ट्याक हुनेछन्।

col-md-4
col-md-4
col-md-4

तीन असमान स्तम्भहरू

डेस्कटपबाट सुरु हुने तीनवटा स्तम्भहरू प्राप्त गर्नुहोस् र विभिन्न चौडाइहरूको ठूला डेस्कटपहरूमा स्केलिङ गर्नुहोस् । याद गर्नुहोस्, ग्रिड स्तम्भहरूले एकल तेर्सो ब्लकको लागि बाह्र सम्म थप्नु पर्छ। त्यो भन्दा बढि, र स्तम्भहरू स्ट्याक गर्न थाल्छन् भ्यूपोर्ट कुनै फरक पर्दैन।

col-md-3
col-md-6
col-md-3

दुई स्तम्भहरू

डेस्कटपबाट सुरु हुने र ठूला डेस्कटपहरूमा स्केलिङ गरी दुईवटा स्तम्भहरू प्राप्त गर्नुहोस् ।

col-md-8
col-md-4

पूर्ण चौडाइ, एकल स्तम्भ

पूर्ण-चौडाइ तत्वहरूको लागि कुनै ग्रिड वर्गहरू आवश्यक छैन।


दुई नेस्टेड स्तम्भहरूसँग दुई स्तम्भहरू

कागजात अनुसार, नेस्टिङ सजिलो छ - अवस्थित स्तम्भ भित्र स्तम्भहरूको पङ्क्ति राख्नुहोस्। यसले तपाइँलाई डेस्कटपबाट सुरु हुने र ठूला डेस्कटपहरूमा मापन गर्ने दुईवटा स्तम्भहरू दिन्छ , अर्को दुई (समान चौडाइ) ठूलो स्तम्भ भित्र।

मोबाइल उपकरणको आकार, ट्याब्लेट र तल, यी स्तम्भहरू र तिनीहरूको नेस्टेड स्तम्भहरू स्ट्याक हुनेछन्।

col-md-8
col-md-6
col-md-6
col-md-4

मिश्रित: मोबाइल र डेस्कटप

बुटस्ट्र्याप 3 ग्रिड प्रणालीमा कक्षाका चार तहहरू छन्: xs (फोनहरू), sm (ट्याब्लेटहरू), md (डेस्कटपहरू), र lg (ठूला डेस्कटपहरू)। थप गतिशील र लचिलो लेआउटहरू सिर्जना गर्न तपाईं यी वर्गहरूको लगभग कुनै पनि संयोजन प्रयोग गर्न सक्नुहुन्छ।

कक्षाको प्रत्येक तह मापन गर्दछ, यसको मतलब यदि तपाइँ xs र sm को लागि समान चौडाइहरू सेट गर्ने योजना बनाउनुहुन्छ भने, तपाइँले केवल xs निर्दिष्ट गर्न आवश्यक छ।

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
col-xs-6
col-xs-6

मिश्रित: मोबाइल, ट्याब्लेट, र डेस्कटप

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

स्तम्भ खाली गर्दै

असमान सामग्रीको साथ अप्ठ्यारो र्‍यापिङ रोक्नको लागि विशेष ब्रेकपोइन्टहरूमा फ्लोटहरू खाली गर्नुहोस्।

.col-xs-6 .col-sm-3
तपाईंको भ्यूपोर्टको आकार बदल्नुहोस् वा उदाहरणको लागि तपाईंको फोनमा जाँच गर्नुहोस्।
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

अफसेट, पुश, र रिसेट पुल

विशिष्ट ब्रेकपोइन्टहरूमा अफसेटहरू, पुशहरू, र पुलहरू रिसेट गर्नुहोस्।

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0