Khi sử dụng dropdown của Bootstrap, có lúc chúng ta sẽ thấy ở console của trình duyệt xuất hiện một đoạn warning như sau:
Popper: CSS
marginstyles cannot be used to apply padding between the popper and its reference element or boundary. To replicate margin, use theoffset
modifier, as well as thepadding
option in thepreventOverflow
andflip
modifiers.
Thật ra cũng không ảnh hưởng mấy, nhưng nếu chúng ta muốn fix lỗi trên để cho console nhìn sạch sẽ hơn thì làm như bài viết này nhé.
Khái quát
Trong Bootstrap, popper
là một thành phần của thư viện Popper.js, một công cụ hỗ trợ việc xác định vị trí của một phần tử trong trang web.
CSS margin
là một thuộc tính cho phép bạn đặt lề cho một phần tử HTML bằng cách xác định khoảng cách giữa phần tử đó và phần tử khác trong trang. Tuy nhiên, trong Popper.js, bạn không thể sử dụng thuộc tính margin
để đặt lề giữa popper và phần tử tham chiếu hoặc giới hạn của nó.
Để tạo hiệu ứng tương tự như margin
, bạn có thể sử dụng sửa đổi offset
cùng với tùy chọn padding
trong các sửa đổi preventOverflow
và flip
.
Cách fix
Nói dài dòng vậy thôi chứ cách fix rất đơn giản:
1
2
3
.dropdown-menu {
margin: 0 !important;
}