Pure-CSS Grid-Standardcode funktioniert nicht

Mit Pure grids reagierte meine Website nicht richtig, also versuchte ich, den Standard-Responsive-Grid-Code in meine Datei zu kopieren und einzufügen, und es funktionierte immer noch nicht richtig.Pure-CSS Grid-Standardcode funktioniert nicht

Dies ist der Standardcode aufgelistet auf ihrer Website:

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

Mein vollständiger Code kann hier gefunden werden. W Wenn Sie den folgenden Code in einem Browser anzeigen, erscheinen die drei Punkte so, als wären sie übereinander gestapelt oder bei 100% Spaltenbreite. Entfernen der "pure-u-1" aus jeder Klassenliste zeigt sie, als ob die Punkte alle sehr klein und übereinander wären, buchstäblich (nicht gestapelt wie Blöcke, da Sie nur eine Reihe von Punkten sehen können).

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

Quelle

2015-03-11 Connorelsea

ich dachte an meinem eigenen aus, nach einem wenig Verwirrung aufgrund widersprüchlicher Anweisungen auf der reinen CSS-Website. Nachdem ich das folgende Stylesheet eingefügt hatte, funktionierte es.

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

An einem der pure-css grids page heißt es:

Da Medien-Anfragen können nicht überschrieben werden, wir sind nicht das Gittersystem als Teil pure.css. Sie müssen es als separate CSS-Datei einfügen. Sie können dies tun, indem Sie Ihrer Seite das folgende Tag hinzufügen.

Später in der Seite heißt es, scheinbar entgegengesetzte Anweisungen:

Grids Teil der Pure CSS-Datei ist. Wenn Sie jedoch nur Grids und nicht die anderen Module möchten, können Sie sie separat herunterziehen.

Quelle

2015-03-11 00:29:18 Connorelsea

Ich würde hinzufügen, dass es wichtig ist, 'grids-responsive-min.css' ** nach **' pure-min.css' einzuschließen, sonst funktioniert es nicht. –

Pure-CSS Grid-Standardcode funktioniert nicht

Antwort

Verwandte Themen