Create a responsive grid layout using React-Bootstrap with three columns that stack vertically on small screens. Which classes would you apply?

Đáp án đúng: "

<Container> <Row> <Col sm={
  12
}
md={
  4
}
>1 of 4</Col> <Col sm={
  12
}
md={
  4
}
>2 of 4</Col> <Col sm={
  12
}
md={
  4
}
>3 of 4</Col> </Row> </Container>

". Grid của React-Bootstrap theo mobile-first: sm={12} nghĩa là từ breakpoint sm (576px) mỗi cột chiếm đủ 12/12 phần nên ba cột xếp chồng dọc, còn md={4} nghĩa là từ md (768px) mỗi cột chiếm 4/12 nên ba cột nằm ngang trên một hàng; dưới 576px, Col không khai báo xs cũng rộng hết hàng. Như vậy ba cột xếp dọc trên màn nhỏ và thành ba cột trên màn vừa trở lên. Phải nói thẳng: phương án chứa "

<Col sm={
  4
}
>1 of 3</Col>

" cũng xếp dọc nếu màn nhỏ được hiểu là dưới 576px, nhưng nó cho ba cột nằm ngang ngay từ mốc sm nên không giữ được bố cục dọc ở màn sm mà câu hỏi nhắm tới. Phương án chứa "<Col>1 of 3</Col> " để Col tự chia đều, ba cột luôn nằm ngang ở mọi kích thước. Phương án chứa "

<Col md={
  12
}
>1 of 4</Col>

" cho mỗi cột rộng đủ hàng ở mọi kích thước nên luôn xếp dọc, kể cả màn lớn. Chữ 1 of 4 bên trong Col chỉ là nội dung hiển thị đánh số lệch, không ảnh hưởng bố cục.