Cách giảm khoảng cách giữa các hàng trong Bootstrap
Là chiều rộng của máng xối ngăn cách các hàng. Giá trị Show
định nghĩa chính thứcGiá trị ban đầu row-gap =0Áp dụng cho các phần tử nhiều cột, bộ chứa linh hoạt, bộ chứa lướiInheritednoPercentages tham chiếu đến thứ nguyên tương ứng của vùng nội dung. Giá trị được tính toán như đã chỉ định, với s được đặt là tuyệt đối và tính toán thông thường bằng 0 ngoại trừ trên các phần tử nhiều cột. Kiểu hoạt hình có độ dài, tỷ lệ phần trăm hoặc calc(); Nhiệm vụ hôm nay là tạo khoảng cách giữa hai hàng trong một bảng. Khoảng cách giữa hai hàng trong một có thể được thêm vào bằng cách sử dụng thuộc tính CSS border-spacing và border-collapse. Thuộc tính border-spacing được sử dụng để đặt khoảng cách giữa các ô của bảng và thuộc tính border-collapse chỉ định đường viền của bảng có bị thu gọn hay không. Thuộc tính khoảng cách đường viền chỉ có thể được sử dụng khi thuộc tính thu gọn đường viền được đặt thành "riêng biệt" Hãy xem một ví dụ và chỉ ra cách thực hiện từng bước
Đây là kết quả của mã của chúng tôi
Giãn cách hàng trong bảngID nhân viênNameGiới tínhTuổi10001TomM3010002SallyF2810003EmmaF24
Trong ví dụ đầu tiên của chúng tôi, đối với thuộc tính khoảng cách đường viền, chúng tôi sử dụng giá trị "0 15px" có nghĩa là khoảng cách nằm giữa các hàng ngang. Trong ví dụ thứ hai, chúng tôi sử dụng giá trị "20px 0 " có nghĩa là khoảng cách nằm giữa các hàng dọc Hãy cung cấp một số nền tảng cho bảng của chúng ta để xem chúng ta đang nói về điều gì, vì vậy Và đây là kết quả Điều gì xảy ra nếu chúng ta muốn xóa các đường viền bên trong giữa các cột trong ví dụ này? Ok, chúng ta hãy cùng nhau sửa lỗi này Xóa thu gọn đường viền. riêng biệt và khoảng cách biên giới. 20px 0 từ bảng CSS Bây giờ, chúng tôi sẽ thêm khoảng cách đường viền. 20px 0 trên mỗi td của bảng của chúng tôi, thay vì toàn bộ bảng Chúng ta cũng nên thêm một thuộc tính hiển thị của khối để nó hoạt động theo cách chúng ta muốn Vì vậy, những thay đổi của chúng tôi sẽ như thế này
Kết quả sẽ giống như trước đây. Bây giờ, đã đến lúc chúng ta xóa không gian viền ngoài bên trái và bên phải. Nó có thể được thực hiện nhanh chóng bằng cách chỉ cần thêm lề âm vào bên trái và bên phải của mỗi phần tử td để nó sẽ xóa khoảng trống đó cho chúng tôi Và ở đây chúng tôi đi. Đây chính xác là những gì chúng tôi muốn. Như bạn thấy, không gian bên trái và bên phải đã biến mất vĩnh viễn Làm cách nào để đặt khoảng cách hàng trong Bootstrap?Nếu bạn cần tách các hàng trong bootstrap, bạn chỉ cần sử dụng. nhóm biểu mẫu . Thao tác này thêm lề 15px vào cuối hàng.
Làm cách nào để giảm dung lượng trong Bootstrap?Cách tiếp cận. Theo mặc định, Bootstrap 4 có class=”no-gutters” để xóa các khoảng trống của bất kỳ div cụ thể nào . Hình ảnh sau đây cho thấy không gian máng xối được tô sáng và khoảng cách giữa các cột trên hệ thống lưới bootstrap 4 12 cột. Bạn thậm chí có thể sửa đổi chiều rộng máng xối bằng cách giảm 15px chiều rộng của không gian máng xối giữa mỗi cột.
Spacer trong bootstrap là gì?$spacer là một biến SASS . Theo mặc định, giá trị của nó là 1rem. Do đó mt-1 là lề trên. 25rem; . |