Il codice predefinito della griglia Pure-CSS non funziona

Utilizzando il Pure grids, il mio sito Web non ha risposto correttamente, quindi ho tentato di copiare e incollare il codice di griglia reattivo predefinito nel mio file, e ancora non funzionava correttamente.Il codice predefinito della griglia Pure-CSS non funziona

Questo è il codice predefinito elencato sul loro sito web:

<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>

Il mio codice completo può essere trovato qui. W gallina che visualizza il seguente codice in un browser, i tre gruppi di punti appaiono come se fossero impilati uno sopra l'altro o con una larghezza di colonna del 100%. Rimuovere il "puro-u-1" da ogni elenco di classi mostra come se i punti fossero tutti molto piccoli e uno sopra l'altro, letteralmente (non impilati come blocchi, poiché è possibile vedere solo un set di punti).

<!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>

fonte

2015-03-11 Connorelsea

ho capito da solo, dopo un po 'di confusione a causa di istruzioni contrastanti sul sito pura-css. Una volta incluso il seguente foglio di stile, ha funzionato.

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

A un l'pure-css grids page afferma:

Dato media query non può essere sovrascritto, non includiamo il sistema di rete come parte di pure.css. Dovrai inserirlo come un file CSS separato. Puoi farlo aggiungendo il seguente tag alla tua pagina.

Più tardi nella pagina esso afferma istruzioni apparentemente opposti:

griglie è parte del file CSS puro. Tuttavia, se vuoi solo Grid e non gli altri moduli, puoi estrarlo separatamente.

fonte

2015-03-11 00:29:18 Connorelsea

Vorrei aggiungere che è importante includere 'grids-responsive-min.css' ** dopo **' pure-min.css', altrimenti non funziona. –

Il codice predefinito della griglia Pure-CSS non funziona

risposta

Problemi correlati