Tôi đang cố gắng thêm lớp bù Bootstrap trong mã của mình để đạt được căn chỉnh đường chéo như thế này:
Nhưng tôi không biết nên sử dụng phần bù nào. Tôi đã thử vài lần bù để đạt được điều này nhưng không sử dụng được. Nội dung bao trùm toàn bộ jumbotron. Đây là mã của tôi
Html:
CSS:
.jumbotron { height: 500px; width: 100%; background-image: url[img/bg.jpg]; background-size: cover; background-position: center;}.jumbotron h2 { color: white; font-size: 60px;}.jumbotron h2:first-child { margin: 120px 0 0;}Xin hướng dẫn cho tôi. Cảm ơn bạn trước.
Bạn đang xem: Col-md-offset là gì
Tôi không khuyên bạn nên sử dụng hệ thống Grid trong trường hợp này, chỉ đơn giản là thêm một phần đệm tăng cho mỗi
. Điều đó đang được nói, cách bạn sẽ đạt được điều này bằng cách sử dụng col-*-offset-* sẽ như sau:
Về cơ bản, dòng đầu tiên phải trải dài trên toàn bộ hàng [vì vậy -12]. Dòng thứ hai phải được bù bởi 1 cột, vì vậy bạn bù 1 và cho tổng chiều rộng là 11 cột [11 + 1 = 12] và cứ thế. Phần bù của bạn luôn đủ để đảm bảo rằng tổng số cột bằng 12.
Nó hoạt động trong bootstrap 4, có một số thay đổi trong tài liệu. Chúng tôi không cần tiền tố col-, chỉ cần offset-md-3 ví dụ:.
Xem thêm: Luật Giao Thông Tiếng Anh Là Gì ? Luật Giao Thông Tiếng Anh Là Gì
kiểm tra cái này bootply
điều này là sai vì bootstrap sử dụng lề trái: **%
.jumbotron h2:first-child { margin: 120px 0 0;}
Vấn đề ở đâu
Trong HTML của bạn, tất cả các h2 đều có cùng một bộ gồm 4 cột, vì vậy chúng sẽ không tạo thành một đường chéo.
Cách khắc phục
Một row có 12 cột, vì vậy chúng ta nên đặt mọi h2 trong đó là row. Bạn nên có một cái gì đó như thế này:
Một cách khác là tạo mọi chiều rộng h2 cộng với 12 cột bù, để mỗi cột tự động kết thúc thành một dòng mới.
Các lớp bù đắp Bootstrap 4 đã bị xóa trong Beta 1, nhưng sẽ được khôi phục trong Beta 2 tham chiếu chủ đề
Hiện tại, nếu bạn muốn di chuyển một cột chỉ hơn 4 đơn vị cột, tôi khuyên bạn chỉ nên sử dụng một trình giữ chỗ giả như trong ví dụ của tôi dưới đây
Keep it blank it becomes right offset Tôi chắc chắn có một cách tốt hơn để làm điều này, nhưng tôi đã vội vàng nên đã sử dụng thủ thuật này
Trong bootstrap 3, định dạng là
col-md-6 col-md-offset-3Đối với cùng một lưới trong Bootstrap 4, định dạng là
col-md-6 offset-md-3
Phản hồi hình ảnh trung tâm căn chỉnh bootstrap 3
Làm thế nào để bạn có được nội dung trung tâm bằng cách sử dụng Twitter Bootstrap?
Làm thế nào để tôi làm cho Glyphicons lớn hơn? [Thay đổi kích thước?]
Bảng cố định tiêu đề và cơ thể cuộn
Ẩn các yếu tố trong bố trí đáp ứng?
Twitter bootstrap 3 hai cột chiều cao đầy đủ
Sử dụng Fieldset Legend với bootstrap
Làm thế nào để loại bỏ tập trung xung quanh các nút bấm
Thay đổi màu công cụ bootstrap
Căn chỉnh hai div theo chiều ngang cạnh trung tâm với trang bằng css bootstrap
Cách sử dụng hình nền phản hồi trong css3 trong bootstrap
Thay đổi màu sắc của thanh điều hướng bootstrap trên liên kết di chuột?
Lớp phủ thanh cuộn trong IE10, làm thế nào để bạn ngăn chặn điều đó?
Làm cách nào để tạo khoảng trắng giữa hai nút trong cùng một div?
Làm thế nào để trung tâm hình thức trong bootstrap 3
Cách đặt khoảng cách giữa các nút bằng bootstrap
Có thể làm cho các biểu tượng Font Awesome lớn hơn fa-5x không?
Trung tâm phân trang trong bootstrap
Thay đổi màu mũi tên trong băng chuyền Bootstraps
Cách tạo thanh điều hướng dính cố định lên trên cùng sau khi cuộn