2015-03-11 26 views
5

Pure grids का उपयोग नहीं करेगा, मेरी वेबसाइट ने ठीक से प्रतिक्रिया नहीं दी है, इसलिए मैंने अपनी फ़ाइल में डिफ़ॉल्ट उत्तरदायी ग्रिड कोड की प्रतिलिपि बनाने और चिपकाने का प्रयास किया, और यह अभी भी ठीक से काम नहीं कर रहा है।शुद्ध-सीएसएस ग्रिड डिफ़ॉल्ट कोड

<div class="pure-g"> 
    <div class="pure-u-1 pure-u-md-1-3"> ... </div> 
    <div class="pure-u-1 pure-u-md-1-3"> ... </div> 
    <div class="pure-u-1 pure-u-md-1-3"> ... </div> 
</div> 

मेरा पूरा कोड यहां पाया जा सकता:

यह डिफ़ॉल्ट उनकी वेबसाइट पर सूचीबद्ध कोड है। डब्ल्यू हेन ब्राउज़र में निम्न कोड को देखकर, बिंदुओं के तीन सेट प्रकट होते हैं जैसे कि वे एक दूसरे के शीर्ष पर या 100% कॉलम चौड़ाई पर हैं। प्रत्येक वर्ग सूची से "शुद्ध-यू -1" को हटाने से उन्हें पता चलता है कि डॉट्स बहुत छोटे थे और एक-दूसरे के शीर्ष पर, सचमुच (ब्लॉक की तरह ढेर नहीं थे, क्योंकि आप केवल डॉट्स का एक सेट देख सकते हैं)।

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>B&W Vending</title> 

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> 
</head> 

<body> 

<div class="pure-g"> 
    <div class="pure-u-1 pure-u-md-1-3"> ... </div> 
    <div class="pure-u-1 pure-u-md-1-3"> ... </div> 
    <div class="pure-u-1 pure-u-md-1-3"> ... </div> 
</div> 

</body> 
</html> 

उत्तर

12

मैंने शुद्ध-सीएसएस वेबसाइट पर विवादित निर्देशों के कारण थोड़ा उलझन के बाद इसे अपने आप से बाहर निकाला। एक बार मैंने निम्नलिखित स्टाइलशीट को शामिल करने के बाद, यह काम किया।

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"> 

एक pure-css grids page यह कहा गया पर:

के बाद से मीडिया क्वेरी नहीं किया जा सकता से अधिक से लिखा है, हम ग्रिड प्रणाली pure.css के हिस्से के रूप में शामिल नहीं है। आपको इसे एक अलग सीएसएस फ़ाइल के रूप में खींचना होगा। आप अपने पेज पर निम्न टैग जोड़कर ऐसा कर सकते हैं।

बाद में पेज में पर यह कहा गया प्रतीत होता है विपरीत निर्देश:

ग्रिड शुद्ध सीएसएस फ़ाइल का हिस्सा है। हालांकि, अगर आप केवल ग्रिड चाहते हैं और अन्य मॉड्यूल नहीं चाहते हैं, तो आप इसे अलग से खींच सकते हैं।

+2

मैं जोड़ता हूं कि ** 'शुद्ध-min.css' के बाद' ग्रिड-उत्तरदायी-min.css' ** शामिल करना महत्वपूर्ण है, अन्यथा यह काम नहीं करता है। –