sự khác biệt giữa col-lg và col-md trong bootstrap3

Question

sự khác biệt giữa col-lg, col-md, col-xs và col-sm hệ thống lưới điện ở trong bootstrap 3 là gì là gì.

Trong mẫu khởi động, chúng chỉ sử dụng <div class="col-lg-6 col-md-6 col-xs-12 col-sm-6"></div> cho lưới một cột. Tôi là người mới bắt đầu trong Bootstrap.

Answer 1

Khi sử dụng Bootstrap, đó là các lớp được thêm vào cho một cột lưới và tương ứng với các thiết bị nhỏ, nhỏ, trung bình và lớn bổ sung.

.col-xs = * thiết bị tắm nhỏ (ví dụ điện thoại) (< 768px)

.col-sm = thiết bị nhỏ (ví dụ: Viên nén) (≥768px)

. = thiết bị Medium col-md (tức là máy tính xách tay, máy tính để bàn hoặc nhỏ) (≥992px)

.col-lg = thiết bị lớn (tức là máy tính để bàn) (≥1200px) *

Cách này thông qua các truy vấn phương tiện, bạn có thể cho phép chỉ có các lớp phù hợp được trình duyệt giải thích. Ví dụ: nếu bạn lướt trang web đó từ máy tính bảng, bạn sẽ thấy rằng các thuộc tính css thực sự được áp dụng trong trình duyệt chỉ là các thuộc tính cho lớp .col-sm.

CẬP NHẬT

Ngoài ra nó quan trọng là phải đề cập đến rằng những lớp học được sử dụng trên một mạng lưới 12 cột trong tổng số đó là thiết lập hệ thống lưới điện được sử dụng bởi Bootstrap.

Do đó khi bạn đang sử dụng .col-sm-4 trên một phần tử, điều đó có nghĩa là phần tử sẽ lấy 4 cột trong số 12 cột trên tổng chiều rộng. Điều này có nghĩa là nếu sử dụng .col-sm-4 thì chỉ có 3 phần tử mỗi hàng có thể vừa với trang trên máy tính bảng.

Ví dụ, giả sử chúng ta muốn hiển thị một số thẻ dự án cho một danh mục đầu tư:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 card"> 
    <div class="card-wrapper"> 
     <img src="img.jpg"> 
     <div class="overlay-text"> 
      <h5>Project 1</h5> 
      <div class="labels"> 
       <label>Tech Stack</label> 
       <h6>HTML5, CSS, JS</h6> 
      </div>  
     </div>   
    </div> 
</div> 

Sử dụng class="col-xs-12 col-sm-6 col-md-4 col-lg-3" tất cả cùng một lúc được sử dụng để kích hoạt các thuộc tính CSS khác nhau trên một yếu tố khi xem trang này trên thiết bị cụ thể.

Nói cách khác, nếu người dùng mở các trang web trên một máy tính để bàn, col-lg-3 có nghĩa là tổng cộng 4 thẻ sẽ được hiển thị, khi col-md-4 means tổng cộng 3 thẻ, col-sm-6 tổng cộng 2 thẻ và sau đó col-xs-12 nghĩa trên điện thoại di động chỉ 1 thẻ sẽ có chiều rộng 100% của trang.

Answer 2

Họ đã thêm tất cả các lớp đó cho một cột lưới trong mẫu đó vì các lớp đó tương ứng với các thiết bị nhỏ, nhỏ, trung bình và lớn thêm cột.

.col-xs = *Extra small devices (ie Phones) (<768px) 

.col-sm = Small devices (ie Tablets) (≥768px) 

.col-md = Medium devices (ie laptops, or small desktops) (≥992px) 

.col-lg = Large devices (ie Desktops) (≥1200px)* 

Answer 3

Tất cả các thẻ, xs, sm, md và lg là một phần của Bootstrap hệ thống lưới.Hệ thống lưới của Bootstrap cho phép tối đa 12 cột trên trang. Hệ thống lưới của Bootstrap đáp ứng và các cột sẽ sắp xếp lại tùy thuộc vào kích thước màn hình: Trên màn hình lớn, nó có thể trông đẹp hơn với nội dung được sắp xếp theo ba cột, nhưng trên màn hình nhỏ sẽ tốt hơn nếu các mục nội dung được xếp chồng lên nhau trên đầu trang của nhau.

Mẹo: Hãy nhớ rằng cột lưới nên thêm tối đa mười hai cho một hàng. Hơn thế nữa, các cột sẽ ngăn xếp bất kể khung nhìn.

Rules

Grid System

Một số Bootstrap hệ thống lưới quy tắc:

• Hàng phải được đặt trong một .container (cố định chiều rộng) hoặc .container-fluid (full-width) cho sự liên kết thích hợp và padding
• Sử dụng các hàng để tạo các nhóm cột ngang
• Nội dung phải được đặt thông qua cột hin, và chỉ có các cột có thể trẻ em ngay lập tức hàng
• lớp Predefined như .row và .col-sm-4 có sẵn để nhanh chóng làm cho bố trí lưới
• Cột tạo máng xối (khoảng cách giữa nội dung cột) thông qua đệm. Phần đệm đó được bù đắp theo hàng cho cột đầu tiên và cột cuối cùng thông qua lề tiêu cực trên .rows
• Cột lưới được tạo bằng cách chỉ định số lượng 12 cột có sẵn mà bạn muốn mở rộng. Ví dụ: ba cột bằng nhau sẽ sử dụng ba số .col-sm-4

Tôi khuyên bạn nên xem qua this link và các trang được liên kết khác để hiểu rõ hơn.