Tương đương với lớp bootstrap chứa trong purecss.io là gì?

Question

Tôi đang sử dụng purecss cho dự án của mình.

Tôi muốn có tất cả trung tâm nội dung trên trang của mình giống như với lớp chứa bộ chứa khởi động.

Tôi đã cố gắng sử dụng những thứ khác nhau bằng lưới thuần chủng nhưng tôi không thể tìm ra cách thực hiện.

Answer 1

Tín chỉ trong nguồn trẻ Luke:
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; 
    } 
} 

Chỉ sau khi cập nhật các câu hỏi ban đầu tôi nhận ra bạn nơi đề cập đến tinh khiết khuôn khổ.

tôi đã xem xét nguồn gốc của nguồn https://github.com/yahoo/pure/blob/master/src/grids/css/grids-core.css và nhận ra rằng nó không có thêm kích thước trên pure-g mà là một wrapper lưới giống như container từ Bootstrap.

Vì vậy, tinh khiết khuôn khổ nhiều generic hơn Bootstrap và nó là hoàn toàn hợp lý để bạn có thể xác định chiều rộng của container đó một mình để bất cứ điều gì bạn muốn.

Chỉ cần áp dụng Bootstrapcontainer quy tắc để pure-g lớp:

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