2015-03-11 22 views
5

Sử dụng Pure grids, trang web của tôi không phản hồi đúng cách, vì vậy tôi đã cố gắng sao chép và dán mã lưới phản hồi mặc định vào tệp của tôi và nó vẫn không hoạt động đúng.Mã mặc định lưới thuần CSS sẽ không hoạt động

Đây là mã mặc định được liệt kê trên trang web của họ:

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

mã đầy đủ của tôi có thể được tìm thấy ở đây. W hen xem mã sau trong trình duyệt, ba bộ chấm xuất hiện như thể chúng được xếp chồng lên nhau, hoặc ở độ rộng cột 100%. Xóa "pure-u-1" khỏi mỗi danh sách lớp cho thấy chúng như thể tất cả các dấu chấm đều rất nhỏ và trên đầu trang, nghĩa đen (không xếp chồng lên nhau như các khối, vì bạn chỉ có thể thấy một tập hợp các dấu chấm).

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

Trả lời

12

Tôi đã tự mình phát hiện ra, sau một chút nhầm lẫn do các hướng dẫn xung đột trên trang web pure-css. Khi tôi đưa vào biểu định kiểu sau, nó đã hoạt động.

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

Tại một sự pure-css grids page nó khẳng định:

Kể từ khi truy vấn phương tiện không thể qua các văn bản, chúng tôi không bao gồm các hệ thống lưới điện như một phần của pure.css. Bạn sẽ phải kéo nó vào dưới dạng tệp CSS riêng biệt. Bạn có thể làm điều này bằng cách thêm thẻ sau vào trang của bạn.

Sau đó trong trang nó khẳng định hướng dẫn dường như ngược lại:

lưới là một phần của tập tin CSS tinh khiết. Tuy nhiên, nếu bạn chỉ muốn Grids và không phải các module khác, bạn có thể kéo nó xuống một cách riêng biệt.

+2

Tôi sẽ thêm rằng điều quan trọng là bao gồm 'grids-responsive-min.css' ** sau **' pure-min.css', nếu không nó sẽ không hoạt động. –

Các vấn đề liên quan