purecss.io में कंटेनर बूटस्ट्रैप कक्षा के बराबर क्या है?

Question

मैं अपनी परियोजना के लिए purecss का उपयोग कर रहा हूं।

मैं अपने पृष्ठ पर अपने सभी सामग्री केंद्र को बूटस्ट्रैप कंटेनर कक्षा के साथ रखना चाहता हूं।

मैंने purecss ग्रिड का उपयोग करके विभिन्न चीजों का उपयोग करने की कोशिश की लेकिन मैं यह नहीं समझ सकता कि इसे कैसे किया जाए। एकमात्र स्रोत युवा ल्यूक में

Answer 1

ट्रस्ट:
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 
@media (min-width: 768px) { 
    .container { 
    width: 750px; 
    } 
} 
@media (min-width: 992px) { 
    .container { 
    width: 970px; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
    width: 1170px; 
    } 
} 

केवल मूल प्रश्न के अपडेट के बाद मैं तुम्हें जहां शुद्ध ढांचे की चर्चा करते हुए महसूस किया।

मैं स्रोत https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.css के स्रोत पर एक नज़र लिया और महसूस किया कि यह pure-g पर कोई आकार है जहाँ से बूटस्ट्रैप सिर्फ container की तरह एक ग्रिड आवरण है कहते हैं।

तो, शुद्ध ढांचे की तुलना में अधिक सामान्य है बूटस्ट्रैप और यह आप जो कुछ भी आप चाहते हैं अपने आप को द्वारा कि कंटेनर की चौड़ाई निर्दिष्ट करने के लिए के लिए पूरी तरह उचित है।

बस pure-g वर्ग के लिए बूटस्ट्रैपcontainer नियम लागू होते हैं:

.pure-g { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 
@media (min-width: 768px) { 
    .pure-g { 
    width: 750px; 
    } 
} 
@media (min-width: 992px) { 
    .pure-g { 
    width: 970px; 
    } 
} 
@media (min-width: 1200px) { 
    .pure-g { 
    width: 1170px; 
    } 
} 

Answer 2

.centered{ 
    margin: 0 auto; 
    width: 80%; 
} 

@media screen and (min-width: 480px) { 
    .centered{ 
      margin: 0 auto; 
      width: 95%; 
     } 
} 

<div class="centered"> </div>